2017-01-06 1 views
8

Ich habe ein Problem mit meiner isomorphen JavaScript-App mit React und Express.Problem 'Zugriffssteuerung - Allow-Origin', wenn der API-Aufruf von React (Isomorphic app) erfolgte

Ich versuche, eine HTTP-Anforderung mit axios.get zu machen, wenn meine Komponente

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 
    }) 
} 

besteigt Ich erhalte einen Status 200 res von der API, aber ich bin keine Antwortdaten bekommen und erhalte 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 machen die Anfrage in meinem server.js

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 bekomme Antwortdaten, wenn der Server startet. Ist das ein Problem mit der tatsächlichen API oder mache ich etwas falsch? Wenn dies ein CORS-Problem war, würde ich vermuten, dass die Anfrage in server.js auch nicht funktionieren würde? Vielen Dank!

Antwort

6

CORS ist ein Browser Funktion. Server müssen sich für CORS entscheiden, damit Browser Richtlinien mit demselben Ursprung umgehen können. Ihr Server hätte nicht die gleiche Einschränkung und könnte Anforderungen an einen Server mit einer öffentlichen API stellen. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

einen Endpunkt auf dem Server mit CORS erstellen aktiviert, der als Proxy für Ihren Web-App handeln kann.

+0

@Todd Sicherheit sollte immer vor Bequemlichkeit kommen. Glücklicherweise können Provisionierungsserver eine 5-minütige Übung sein. Darüber hinaus gibt es Proxy-Dienste, die diese Art von Funktionalität bereits verfügbar machen, aber nur so viele kostenlose Anfragen erlauben. Die Einrichtung eines eigenen Proxy ist den extrem geringen Aufwand wert. – azium

0

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

Dies ist Header von API, die ich von Chrome Brower erfasst:

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 

No CORS-Header in Antwort-Header.

1

Ich denke, die Antwort auf Ihre Frage ist here

Chrome haben, Access-Control-Allow-Origin im Header, nur alias localhost in/etc/hosts-Datei auf eine andere Domain senden, wie:

127.0.0.1 localhost yourdomain.com

6

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

Verwandte Themen