72937

Disabling CORS using js fetch [duplicate]

Question:

This question already has an answer here:

<ul><li> <a href="/questions/41030058/how-to-get-the-image-extension-from-a-remote-image-url-that-doesnt-contain-imag" dir="ltr" rel="nofollow">How to get the image extension from a remote image url that doesn't contain image extension in the url</a> <span class="question-originals-answer-count"> 1 answer </span> </li> </ul>

I've looked into it and my syntax looks correct but I can't figure out what is going wrong. If I didn't include the options params, everything works fine except CORS is on, which is what I do not want.

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

<blockquote>

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

</blockquote>

have already tried looking here: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch</a> and here: <a href="https://jakearchibald.com/2015/thats-so-fetch/" rel="nofollow">https://jakearchibald.com/2015/thats-so-fetch/</a>

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) });

Answer1:

Using the no-cors option will <em>not</em> give you a readable response:

<blockquote>

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. <strong>In addition, JavaScript may not access any properties of the resulting Response.</strong> This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains. <em>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/mode" rel="nofollow">source</a>, emphasis mine)</em>

</blockquote>

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 <a href="https://crossorigin.me/" rel="nofollow">crossorigin.me</a> or <a href="https://cors-anywhere.herokuapp.com/" rel="nofollow">cors-anywhere</a>, 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, <a href="https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API" rel="nofollow">service workers</a> 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).

Recommend

  • jhipster oauth : How can i get the token via CURL
  • CORS issue with Vue.js
  • Does Angular 2 application block cookies from being stored by default?
  • iOS Cordova first plugin - plugin.xml to inject a feature
  • Julia: How to give multiple workers access to functions that are 'include(…)' into a modul
  • How to retrieve information from antrun back to maven?
  • Do query loads all the data in memory
  • aapt.exe'' finished with non-zero exit value 1
  • Salesforce Different WSDL files and when to use
  • How to get latest version of a artifact on Bintray using JSONP
  • JPA flush vs commit
  • AndEngine Applying Transparancy to AndEngine View
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • C: Incompatible pointer type initializing
  • Jetty 9 HashLoginService
  • Installing Apache MyFaces 2 on WildFly 8.2.0
  • Read a local file using javascript
  • ImageMagick, replace semi-transparent white with opaque white
  • Cannot connect to cassandra from Spark
  • Display issues when we change from one jquery mobile page to another in firefox
  • AES padding and writing the ciphertext to a disk file
  • VS2008 Enable C++ Exception with SEH
  • Cross-Platform Protobuf Serialization
  • Trying to switch camera back to front but getting exception
  • htaccess rewriting URLs with multiple forward slashes
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Do I've to free mysql result after storing it?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Is there a mandatory requirement to switch app.yaml?
  • File upload with ng-file-upload throwing error
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#
  • AngularJs get employee from factory
  • Acquiring multiple attributes from .xml file in c#
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • Programmatically clearing map cache
  • java string with new operator and a literal