CORS mit React, Webpack und Axios

So richten Sie den CORS-Header in der Front-End-App mit Webpack und Axios ein.CORS mit React, Webpack und Axios

Ich möchte eine Antwort von einer API-URL erhalten. Muss ich einen Sepparate-Server einrichten, sagen wir Express, oder kann dies mit dem webpack-dev-server aus der Frontend-Anwendung geschehen.

ich den Fehler:

Failed to load https://api.test.io/test/res: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Quelle

2017-10-23 Tadas Stasiulionis

Mögliches Duplikat [Ursprung http: // localhost: 3000 ist nicht erlaubt von Access-Control-Allow-Origin] (https://stackoverflow.com/questions/18642828/origin-http-localhost3000-is -nicht-allowed-by-access-control-allow-origin) –

Offenbar müssen Sie localhost für die Entwicklung mit Ihrem API-Anbieter https://test.io auf die weiße Liste setzen –

Sie nicht setzen CORS Header Client-Seite, werden sie automatisch vom Browser gesendet. Sie tun es Server-Seite. Konfigurieren Sie den Webpack-Server so, dass er mit Access-Control-Allow-Origin antwortet, der auf den Platzhalter * festgelegt wurde.

devServer: { 
    headers: { 
     "Access-Control-Allow-Origin": "*" 
    } 
}

Quelle

2017-10-23 16:47:29 Scriptonomy

Das Problem ist mit dem Server, nicht mit Axios. Sie müssen Ihre Webpack-devServer-Header einrichten, um CORS zuzulassen.

devServer: { 
    headers: { 
     "Access-Control-Allow-Origin": "*", 
     "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept" 
    } 
}

Quelle

2017-10-23 16:51:13

CORS mit React, Webpack und Axios

Antwort

Verwandte Themen