23

I've looked into it and my syntax looks correct but I can't figure out what is going wrong.

If I don't include the fetch options params, everything works fine except that CORS is on, which is what I do not want.

After adding the options with mode: 'no-cors' in the request, I am now getting this error with all requested images:

image-cropper-modal.js:73 GET data: net::ERR_INVALID_URL

I have already tried looking at MDN's Using Fetch and https://jakearchibald.com/2015/thats-so-fetch/.

Here is my code:

const options = {
  method: 'GET',
  mode: 'no-cors'
};

fetch(url, options).then(response => response.blob())
   .then(blob => {
      let reader = new FileReader();
      reader.onload = () => {
        const type = blob.type;
        const [image, dataUrl] = [new Image(), reader.result];
        image.src = dataUrl;
        const [width, height] = [image.width, image.height];
        const {minWidth, minHeight} = props.opt;
        const isWithinBounds = (width >= minWidth) && (height >= minHeight);
        callback({
          dataUrl,
          height,
          minHeight,
          minWidth,
          width
        });
   }
   reader.readAsDataURL(blob) 
});
icc97
  • 11,395
  • 8
  • 76
  • 90
Anchalee
  • 636
  • 1
  • 5
  • 12
  • Do you have access to the server side? In dev mode, I use to put this to avoid CORS response.header("Access-Control-Allow-Origin", "*"); response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); – Emiliano Barboza Dec 08 '16 at 01:51
  • 2
    FYI - in your second link, about no-cors it states **Of course, you can't read the content of the response** which makes it pretty clear that your code would fail to read the response (even if cors headers are present, I believe) – Jaromanda X Dec 08 '16 at 01:59

1 Answers1

23

Using the no-cors option will not give you a readable response:

no-cors — Prevents the method from being anything other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they may not add or override any headers except for these. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains. (source, emphasis mine)

In other words, if you want to make a request from JavaScript, you need to have CORS enabled. If you can't set up CORS support on the server yourself, the only way around this is to proxy your request through a server makes non-CORS requests on your behalf (either by using up your own server, or by using a third-party service such as crossorigin.me or cors-anywhere, or any of a bunch of other similar services).

For context, the no-cors option is available because there are some cases where you may want to make a non-CORS request without having to be able to read the response. For instance, service workers can use this option to intercept (e.g., redirect or cache, but not read or modify) requests made by the browser (like <img> tags or HTML pages, not just JavaScript code).

Frxstrem
  • 38,761
  • 9
  • 79
  • 119