设置 CORS 标头以在 CRA 中快速刷新

问题描述

{
  "react": "^17.0.1","react-scripts": "4.0.3"
}

我的 React 应用程序在开发过程中跨域加载，并且我已将我的 React 应用程序配置为使用 __webpack_public_path__ 跨域加载包块。

例如：

https://test.local 上的页面 -> 嵌入 https://host.docker.internal:3002/static/js/bundle.js -> 加载 https://host.docker.internal:3002/static/js/0.chunk.js。

问题是在热加载期间，更新 JSON 也从跨域加载导致 CORS 错误：

由于 CRA 不允许配置访问 webpack-dev-server，所以除了通过 FAST_REFRESH=false env 变量禁用快速刷新之外，我想不出其他方法。

有人有更好的想法或解决方案吗？

解决方法

我已经检查了您的 CORS 问题，当开发人员在不同的域中工作时，总是会遇到这个问题。

传递 CORS 问题的方法有很多，但我会告诉你如何在 React 应用程序中处理 CORS。

手动代理 如果我们需要更多地控制这些跨域请求的生成方式，我们还有另一种选择，即创建一个文件 src/setupProxy.js，如下所示：

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/api",proxy({
      target: "http://localhost:4000",// target server address and port
      changeOrigin: true
    })
  );
};

但我们可以更进一步，使用 http-proxy-middleware 的选项如 pathRewrite 来更改请求的路径：

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/api",changeOrigin: true,pathRewrite: {
        "^/api": "/api/v1"
      }
    })
  );
};

如果您的网络应用程序需要从不同的域请求数据，并且您希望您的开发环境模仿生产配置，其中前端和后端由同一域提供服务，请务必查看代理和 {{ 1}} 创建 React App 的选项。它们将使您的应用开发变得更加容易！

希望我的经验对您和其他人有所帮助。