CORS 与 React、Webpack 和 Axios

Posted 2023-02-27

【中文标题】CORS 与 React、Webpack 和 Axios

【英文标题】：CORS with React, Webpack and Axios

【发布时间】：2018-04-04 06:45:48

【问题描述】：

如何使用 webpack 和 axios 在 react 前端应用中设置 CORS Header。

我想从 API 网址获得响应。我是否必须使用 express 设置单独的服务器，或者可以使用前端应用程序中的 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.

【问题讨论】：

Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin的可能重复

您似乎需要将 localhost 列入白名单以使用您的 API 提供者 test.io

进行开发

我在浏览器中打开了api.test.io/test/res>，它显示404。有时如果你以错误的方式使用API​​，你会得到一个CORS响应。

【参考方案1】：

您没有在客户端设置 CORS 标头，它们是由浏览器自动发送的。你在服务器端做。配置 Webpack 服务器以将 Access-Control-Allow-Origin 设置为通配符 * 进行回复。

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

【参考方案2】：

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

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