为 CRA 中的快速刷新设置 CORS 标头

Question

{
  "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 环境变量禁用快速刷新之外，我想不出其他办法。

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

Answer 1

我已经检查了您的 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",
    proxy({
      target: "http://localhost:4000",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api/v1"
      }
    })
  );
};

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

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