0 
{
  "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 错误：

显示 CORS 错误的控制台

FAST_REFRESH=false由于 CRA 不允许对 webpack-dev-server 进行配置访问，除了通过env 变量禁用快速刷新之外，我想不出办法解决这个问题。

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

4

1 回答 1

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-middlewarepathRewrite 之类的选项来更改请求的路径：



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

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

如果您的 Web 应用程序需要从不同的域请求数据，并且您希望您的开发环境模拟前端和后端从同一域提供服务的生产配置，请务必查看src/setupProxy.jsCreate React App 的代理和选项. 他们将使您的应用程序的开发更加容易！

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

于 2021-06-23T06:09:25.547 回答