创建 React App 添加 CORS 标头

Posted 2023-03-04

【中文标题】创建 React App 添加 CORS 标头

【英文标题】：Create React App adding CORS header

【发布时间】：2018-02-13 01:58:14

【问题描述】：

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

到目前为止，我将其添加到 config/webpackDevServer.config.js，但运气不佳。

知道我可以在哪里添加它吗？

谢谢！

【问题讨论】：

为什么 webpack-dev-server 需要 CORS 标头？

公开你的代码，这样容易理解和帮助你！

【参考方案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;
    ;
  ,
;

【参考方案2】：

我遇到了这个问题。就我而言，我正在做一些不寻常的事情。我正在从 Salesforce Visualforce 页面提供我的 React 应用程序，因此该页面是从 visual.force.com 域提供的。我已经连接了 Visualforce 页面，以便我可以使用 Webpack Dev Server 和隧道 (ngrok) 在本地运行应用程序，以将来自 Salesforce 的请求代理到 localhost。当我的应用尝试从应用的“公共”文件夹加载资源时，我会收到如下错误：

无法加载 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 配置对象。

【参考方案3】：

抱歉，如果我有错误的一端，但从你的问题来看，我猜你正在使用带有反应前端的后端 api。 afaik 你不需要 cors，只需向你的客户端/前端 package.json 添加一个代理： "proxy": "http://localhost:5000/" 丹确实说这仅适用于简单的情况，但我希望它有所帮助