Fetch API can't load, cors

Question

In my React app, I'm trying to make a GET request from my heroku server to get a list of users:

 https://blablabla.heroku.com/users 

using the following query:

 const sendSearch = fetch('/https://blablabla.heroku.com/users', {credentials: 'same-origin'}) function loadMyUsers(data) { data.json().then((jsonData) => { // console.log(jsonData) }) } sendSearch.then(loadMyUsers)} 

However, I get the following error:

 Fetch API cannot load https://blablabla.heroku.com/users. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request mode to 'no-cors' to fetch the resource with CORS disabled. 

I tried changing the Fetch method to many things similar to:

 const sendSearch = fetch('https://blablabla.heroku.com/users',{ method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'mode': 'no-cors' } }) 

but the problem persists.

How do I make a cross-domain request?

Answer 1

On the heroku server, you must add Access-Control-Allow-Origin: * to your response headers or, if you want, more specifically Access-Control-Allow-Origin: http://localhost:8080 .

However, on your production server, you probably will not need this header unless you have good reason for cross-search requests.