Problem mit Zugriffssteuerung und zulässigem Ursprung, wenn der API-Aufruf von React (Isomorphic App) erfolgt

8

Ich stoße auf ein Problem mit meiner isomorphen JavaScript-App mit React und Express.

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

%Vor%

Ich bekomme einen Status 200 res von der API, aber ich bekomme keine Antwortdaten und bekomme einen Fehler in meiner Konsole

%Vor%

Allerdings, wenn ich die Anfrage in meiner server.js

mache %Vor%

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? Danke!

    
Scott Davidson 06.01.2017, 01:48
quelle

4 Antworten

7

CORS ist eine 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. Ссылка

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

    
azium 06.01.2017, 02:10
quelle
7

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

    
Colleen Purcell 22.03.2017 00:28
quelle
1

Ich denke, die Antwort auf Ihre Frage ist hier

  

Damit Chrome Access-Control-Allow-Origin in der Kopfzeile sendet, benennen Sie einfach Ihren localhost in Ihrer / etc / hosts-Datei in eine andere Domain um, beispielsweise:

     

127.0.0.1 localhost yourdomain.com

    
Pablo Darde 06.01.2017 02:13
quelle
0

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

Dies ist der Header aus der API, den ich von Chrome-Browser übernommen habe:

%Vor%

Kein CORS-Header in Antwortheadern.

    
Nguyen Thanh 06.01.2017 02:08
quelle