Javascript 带有React、网页包和Axios的CORS

如何使用webpack和axios在react前端应用程序中设置CORS标头

我想从API url获取响应。我是否必须使用express来设置separate服务器，或者可以使用前端应用程序中的webpack dev server来完成

我得到一个错误：

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.

---

您不需要在客户端设置CORS标题，它们是由浏览器自动发送的。您可以在服务器端执行此操作。将网页包服务器配置为使用

访问控制允许来源
设置为通配符
*
进行回复

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

问题在于服务器，而不是Axios。您需要设置webpack devServer头以允许COR

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

可能是重复的，看起来您需要将localhost列入白名单，以便使用您在浏览器中打开的API提供程序进行开发，上面写着404。有时，如果您以错误的方式使用API，您将得到CORS响应。