无需Express：使用create-react-app和webpack发起CORS API请求

兄弟，我太懂你踩的坑了——用Create React App（CRA）开发时，直接找webpack.config.js加devServer headers根本没用，因为CRA默认把webpack配置藏得好好的，你改的那个文件大概率没被项目实际加载！下面给你几个靠谱的解决方案，按需选就行：

方法一：用CRA官方内置代理（最简单省心） #

这是CRA官方推荐的方案，完全不用碰webpack配置，直接在项目根目录的package.json里加一行配置：

"proxy": "https://你的目标API域名.com"

• 原理：所有发给开发服务器（比如http://localhost:3000/api/xxx）的请求，都会自动转发到你填的API域名，相当于浏览器和API之间多了一层代理，自然就绕开了CORS限制。
• 注意：这个方法只适用于开发环境，生产环境还是得靠后端配置CORS或者部署时用反向代理。

方法二：暴露webpack配置后修改（适合复杂需求） #

如果你必须自定义devServer的headers，那得先把CRA隐藏的webpack配置暴露出来：

1. 运行命令（不可逆操作，谨慎执行！）：

npm run eject

2. 之后在项目根目录找到config/webpack.config.js，找到devServer配置块，把你查到的headers配置加进去：

devServer: {
  // 保留原本已有的devServer配置
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}

3. 重启开发服务器，配置就生效了。

方法三：用第三方工具修改配置（无需eject） #

不想执行不可逆的eject操作？可以用react-app-rewired来覆盖webpack配置：

1. 先安装依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录新建config-overrides.js文件，写入以下内容：

module.exports = function override(config, env) {
  // 只在开发环境下添加headers配置
  if (env === 'development') {
    config.devServer = {
      ...config.devServer,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    };
  }
  return config;
};

3. 修改package.json里的启动命令，把原来的react-scripts换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 重启开发服务器，就能生效了。

内容的提问来源于stack exchange，提问作者Tim