CODEWITHSUNDEEP
javascriptcorsfetch-api
Bunyk
Bunyk

Reputation: 8067

How to do Cross-Origin Resource sharing from client?

I know that title of this question makes no sense, because client does not share anything, it requests. But, say I want to write a RSS reader as an excercise. So I would store all my data on client in IndexedDB (or localstorage), and I want to fetch some streams. So I do for example

fetch('https://bunyk.wordpress.com/feed/')

But wordpress.com is not in my controll, and it gives me error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I could avoid that error by using {mode: 'no-cors'}, but in that way I'm not able to get contents too.

Is there any way to make it work, or I need to write and host some thin backend that proxies that requests and adds 'Access-Control-Allow-Origin' header? (Probably such proxy already exists somewhere?) Or could I use something from Progressive Web Apps abilities, like Service Workers? Or should I use something like Electron or Cordova? What I wish to do, is to make my app work on mobile too.

Upvotes: 1

Views: 1773

Answers (3)

sideshowbarker
sideshowbarker

Reputation: 88076

You can right now do this:

fetch('https://cors-anywhere.herokuapp.com/https://bunyk.wordpress.com/feed/')

…and it will just work.

That causes the request to be made to https://cors-anywhere.herokuapp.com, a open/public proxy which will then send it to https://bunyk.wordpress.com/feed/. And when that proxy gets the response, it’ll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser engine is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.

Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.

Upvotes: 2

Quentin
Quentin

Reputation: 943564

How to do Cross-Origin Resource sharing from client?

You can't. It would make having the permissions security pointless if your code could grant itself permission to access anything it liked.

some thin backend that proxies that requests and adds 'Access-Control-Allow-Origin' header?

It only needs to add the header if the proxy itself is cross-origin, but yes: That is the standard approach to getting around the SOP for publically available data when you don't have the cooperation of the host.

Probably such proxy already exists somewhere

There are many. I won't recommend any particular one.

Or could I use something from Progressive Web Apps abilities, like Service Workers?

No

Or should I use something like Electron or Cordova?

If you're doing that then you would be writing software that the user would have to explicitly install. It wouldn't be a web app. The SOP wouldn't apply (at least not in the usual way).

Upvotes: 2

Plankton
Plankton

Reputation: 386

This is my opinion and may be what you require or otherwise. Setting up proxy can be a real pain and jsonp seems cumbersome to me.

u can write ur own function (for cors). Start with using XMLHttpRequest2 (firefox, etc) and XDomainRequest for IE.

Something like this:- 

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {

    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    xhr.open(method, url, true);

  } else if (typeof XDomainRequest != "undefined") {

    // Otherwise, check if XDomainRequest.
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    xhr = new XDomainRequest();
    xhr.open(method, url);

  } else {

    // Otherwise, CORS is not supported by the browser.
    xhr = null;

  }
  return xhr;
}

var xhr = createCORSRequest('GET', url);
if (!xhr) {
  throw new Error('CORS not supported');
}

Reference:- https://www.html5rocks.com/en/tutorials/cors/

Shows how u can do headers, etc. (scroll to "Handling a not-so-simple request") May be helpful to you or otherwise. Hope this helps .

Upvotes: -3

Related Questions