Question

我正在尝试找出将“Access-Control-Allow-Origin”标头添加到我的create-react-app dev服务器配置的位置。

到目前为止，我将它添加到for (var i=0;i<molecules.length;i++) { // etc. }没有太多运气。

关于我可以添加它的任何想法？

谢谢！

Answer 1

这里是根据@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;
    };
  },
};

Answer 2

我遇到了这个问题。在我的情况下，我做了一些不寻常的事情。我从Salesforce Visualforce页面提供了我的React应用程序，因此该页面是从visual.force.com域提供的。我已经连接了Visualforce页面，以便我可以使用Webpack Dev Server和隧道（ngrok）在本地运行应用程序，以将请求从Salesforce代理到localhost。当我的应用尝试从应用加载资源时，＃34; public＆＃34;文件夹我得到这样的错误：

Failed to load https://xxxx.ngrok.io/scss/bootstrap.scss: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxx.visual.force.com' is therefore not allowed access.

我尝试将devServer: {headers: {'Access-Control-Allow-Origin': '*'}}添加到webpack.config.dev.js配置对象，但这没有用。我发现我必须将以下内容添加到webpackDevServer.config.js文件中：headers: {'Access-Control-Allow-Origin': '*'}（注意＆＃34; headers＆＃34;是顶级配置属性，不嵌套在＆＃34; devServer＆＃34; property）。我读到了当你通过Node API运行Webpack Dev Server时，它没有从你的webpack配置文件中读取devServer配置对象。

Answer 3

如果我有错误的结尾，请道歉，但是从你的问题我猜测你正在使用带有反应前端的后端api。 afaik你不需要cors，只需添加一个代理到你的客户端/前端package.json： "proxy": "http://localhost:5000/" Dan确实说这仅适用于简单的案例，但我希望它有所帮助

创建添加CORS标头的React App

3 个答案: