最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CORS with React, Webpack and Axios - Stack Overflow

programmeradmin4浏览0评论

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 : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

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.
Share edited Nov 1, 2019 at 2:29 Vincent D'amour 3,9031 gold badge29 silver badges40 bronze badges asked Oct 23, 2017 at 16:23 Tadas StasiulionisTadas Stasiulionis 1,3163 gold badges16 silver badges19 bronze badges 3
  • Possible duplicate of Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin – Jefree Sujit Commented Oct 23, 2017 at 16:41
  • It seems like you need to whitelist localhost for development with your API provider test.io – Max Gram Commented Oct 23, 2017 at 17:50
  • I opened <api.test.io/test/res> in the browser and it says 404. Sometimes if you use API in a wrong way, you will get a CORS response. – leaf Commented Nov 1, 2019 at 2:39
Add a ment  | 

2 Answers 2

Reset to default 3

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": "*"
   }
}
发布评论

评论列表(0)

  1. 暂无评论