Fetch API kann nicht geladen werden, cors
In meinem React
app, die ich bin versucht zu machen, ein GET
bitte meine heroku-server, um eine Liste von Benutzern:
https://blablabla.heroku.com/users
anhand der folgenden Anfrage:
const sendSearch = fetch('/https://blablabla.heroku.com/users', {credentials: 'same-origin'})
function loadMyUsers(data) {
data.json().then((jsonData) => {
//console.log(jsonData)
})
}
sendSearch.then(loadMyUsers)}
Jedoch bekomme ich die 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 versucht, meine Fetch-Methode, um viele Dinge ähnlich:
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 weiterhin.
Wie mache ich das cross-domain-Anfrage?
- Sie haben, um die richtige
Access-Control-Allow-Origin
Header auf Ihr backend. Die fetch-Anforderung scheint zu funktionieren. - Das problem ist nicht mit Ihrem front-end, wie @Borma beantwortet, sondern mit deinem server. Sie haben zum aktivieren von CORS auf server-Seite
Du musst angemeldet sein, um einen Kommentar abzugeben.
Auf Ihre heroku-server, den Sie hinzufügen sollten
Access-Control-Allow-Origin: *
auf Ihre Antwort-Header, oder mehr spezifischeAccess-Control-Allow-Origin: http://localhost:8080
wenn Sie es wünschen.Auf dem Produktionsserver obwohl, werden Sie wahrscheinlich nicht benötigen diesen-header, es sei denn, Sie haben einen sehr guten Grund für das cross-origin-requests.