我试图找出将“Access-Control-Allow-Origin”标头添加到我的 create-react-app 开发服务器配置的位置。
到目前为止,我将它添加到config/webpackDevServer.config.js
没有太多运气。
知道我可以在哪里添加它吗?
谢谢!
我试图找出将“Access-Control-Allow-Origin”标头添加到我的 create-react-app 开发服务器配置的位置。
到目前为止,我将它添加到config/webpackDevServer.config.js
没有太多运气。
知道我可以在哪里添加它吗?
谢谢!
这是一个基于@tlfu 对使用react-app-rewired
. 在这种情况下,您需要定义一个config-overrides.js
包含以下内容的根级文件:
module.exports = {
// Extend/override the dev server configuration used by CRA
// See: https://github.com/timarney/react-app-rewired#extended-configuration-options
devServer: function(configFunction) {
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
// Default config: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
const config = configFunction(proxy, allowedHost);
// Set loose allow origin header to prevent CORS issues
config.headers = {'Access-Control-Allow-Origin': '*'}
return config;
};
},
};
我遇到了这个问题。就我而言,我正在做一些不寻常的事情。我正在从 Salesforce Visualforce 页面提供我的 React 应用程序,因此该页面是从 visual.force.com 域提供的。我已经连接了 Visualforce 页面,以便我可以使用 Webpack Dev Server 和隧道 (ngrok) 在本地运行应用程序,以将来自 Salesforce 的请求代理到本地主机。当我的应用程序尝试从应用程序“公共”文件夹加载资源时,我会收到如下错误:
无法加载 https://xxxx.ngrok.io/scss/bootstrap.scss:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“https://xxxx.visual.force.com”。
我尝试添加devServer: {headers: {'Access-Control-Allow-Origin': '*'}}
到 webpack.config.dev.js 配置对象,但这不起作用。我发现我必须将以下内容添加到 webpackDevServer.config.js 文件中:(headers: {'Access-Control-Allow-Origin': '*'}
请注意,“headers”是顶级配置属性,而不是嵌套在“devServer”属性中)。我读到当您通过 Node API 运行 Webpack Dev Server 时,它不会从您的 webpack 配置文件中读取 devServer 配置对象。
抱歉,如果我有错误的一端,但从您的问题来看,我猜您正在使用后端 api 和 react 前端。afaik 您不需要 cors,只需向您的客户端/前端 package.json 添加一个代理:
"proxy": "http://localhost:5000/"
Dan 确实说这仅适用于简单情况,但我希望它有所帮助