web-dev-qa-db-de.com

'Zugriffskontroll-Zulassen-Ursprung' Problem beim API-Aufruf von React (Isomorphic App)

Ich habe Probleme mit meiner isomorphen JavaScript-App mit React und Express. 

Ich versuche, eine HTTP-Anforderung mit axios.get zu erstellen, wenn meine Komponente aktiviert wird

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

Ich erhalte einen Status 200 res von der API, erhalte jedoch keine Antwortdaten und eine Fehlermeldung in meiner Konsole

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Wenn ich jedoch die Anfrage in meinen server.js stelle

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

Es funktioniert gut und ich erhalte Antwortdaten, wenn der Server startet. Ist dies ein Problem mit der tatsächlichen API oder mache ich etwas falsch? Wenn dies ein CORS-Problem war, würde die Anforderung in server.js wahrscheinlich nicht funktionieren. Vielen Dank!

15
Scott Davidson

CORS ist eine browser - Funktion. Server müssen sich für CORS entscheiden, damit Browser dieselbe Origin-Richtlinie umgehen können. Ihr Server hätte nicht die gleiche Einschränkung und wäre in der Lage, Anfragen an einen Server mit einer öffentlichen API zu stellen. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Erstellen Sie auf Ihrem Server einen Endpunkt mit aktiviertem CORS, der als Proxy für Ihre Webanwendung fungieren kann.

13
azium

Verwenden Sie die Google Chrome-Erweiterung namens Allow-Control-Allow-Origin: * . Es ändert die CORS-Header in Ihrer Anwendung im laufenden Betrieb.

16
Colleen Purcell

Ich denke, die Antwort auf Ihre Frage lautet hier

Damit Chrome Access-Control-Allow-Origin in der Kopfzeile senden kann, geben Sie einfach Ihren localhost in Ihrer Datei/etc/hosts an eine andere Domäne an, z.

127.0.0.1 localhost yourdomain.com

1
Pablo Darde

Ich weiß nicht, ob dies helfen wird, aber ich habe beim Remote-Debugging einer reaktiven Anwendung denselben Fehler erhalten. Ich habe den Debugger auf 192.168.x.x: 8081 ausgeführt. Ich habe ein wenig darüber gelesen Cross-Origin Resource Sharing (CORS) , um mich darüber zu informieren, was CORS ist. (Ich bin Anfänger) und habe meine URL von IP: 8081 in localhost: 8081 geändert und mein Problem wurde behoben.

0
Mingina

Ich hatte das gleiche Problem. Die anderen Antworten sind korrekt, aber es gibt eine andere Lösung. Sie können den Antwortheader so einstellen, dass er den Zugriff zwischen verschiedenen Quellen erlaubt. Nach diesem Beitrag müssen Sie vor jeder Anwendung die folgenden Codes hinzufügen. anrufen:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

das hat für mich funktioniert :)

0
arash nadali

Da der Server keinen CORS-Header hat, dürfen Sie keine Antwort erhalten.

Dies ist ein Header der API, den ich von Chrome brower aufgenommen habe:

Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

Kein CORS-Header in Antwortheatern.

0
Nguyen Thanh