2017-03-05 3 views
5

In meinem React app Ich versuche, eine GET Anfrage von meinem Heroku-Server, um eine Liste der Benutzer zu erhalten nicht:Fetch API laden cors

https://blablabla.heroku.com/users 

folgende Anfrage mit:

const sendSearch = fetch('/https://blablabla.heroku.com/users', {credentials: 'same-origin'}) 

function loadMyUsers(data) { 
    data.json().then((jsonData) => { 
    // console.log(jsonData) 

    }) 
} 

sendSearch.then(loadMyUsers)} 

Allerdings bekomme ich folgende Fehlermeldung:

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's mode 
to 'no-cors' to fetch the resource with CORS disabled. 

ich habe versucht, meine Änderungsverfahren Fetch zu vielen ähnlichen Dingen wie:

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

aber das Problem besteht fort.

Wie mache ich die Cross-Domain-Anfrage?

+6

Sie müssen die richtigen 'Access-Control-Allow-Origin'-Header in Ihrem Backend festlegen. Die Abrufanforderung scheint zu funktionieren. –

Antwort

0

Auf Ihrem Heroku-Server sollten Sie zu Ihren Antwortheadern hinzufügen, oder genauer Access-Control-Allow-Origin: http://localhost:8080, wenn Sie möchten.

Auf Ihrem Produktionsserver werden Sie diese Kopfzeile wahrscheinlich nicht benötigen, es sei denn, Sie haben einen sehr guten Grund dafür, Ursprungsanforderungen zu stellen.