创建React App添加CORS标头 [英] Create React App adding CORS header

问题描述

我试图找出将 Access-Control-Allow-Origin标头添加到我的create-react-app dev服务器配置中的位置。

I'm trying to figure out where to add the "Access-Control-Allow-Origin" header to my create-react-app dev Server config.

到目前为止，我将其添加到 config / webpackDevServer.config.js 并没有多大运气。

So far I'm adding it to config/webpackDevServer.config.js without much luck.

任何想法我可以在哪里添加呢？

Any idea on where I could add it?

谢谢！

推荐答案

这是基于@tlfu的食谱对于使用 react-app-rewired 的用户的答案。在这种情况下，您需要定义一个包含以下内容的根级别 config-overrides.js 文件：

Here is a recipe based on @tlfu 's answer for those that are using react-app-rewired. In this case you'll need to define a root level config-overrides.js file containing the following:

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;
    };
  },
};

这篇关于创建React App添加CORS标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！