How to set up CORS Header in react front end app with webpack and axios.
I want to get a response from an API url. Do I have to set up sepparate server with let's say express, or it can be done with webpack-dev-server from the front-end application.
I get the error:
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.
The issue is with the server, not with Axios. You need to setup your webpack devServer headers to allow CORS.
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
}
}
You don't set CORS headers client side, they are sent automatically by the browser. You do it server side. Configure Webpack server to reply with Access-Control-Allow-Origin
set to the wildcard *
.
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.