带有 React、Webpack 和 Axios 的 CORS

Question

如何在带有 webpack 和 axios 的 React 前端应用程序中设置 CORS Header。

我想从 API url 获得响应。 我是否必须使用 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.

Answer 1

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

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

Answer 2

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

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