在CRA中设置用于快速刷新的CORS标头

Question

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

我的React应用程序是在开发中跨域加载的，我已经将我的React应用程序配置为使用__webpack_public_path__跨域加载捆绑包块。

例如：

https://test.local -> embeds https://host.docker.internal:3002/static/js/bundle.js -> loads https://host.docker.internal:3002/static/js/0.chunk.js上的页面。

问题是在热加载过程中，更新的JSON也是从跨域加载的，导致CORS错误：

​

​

由于CRA不允许配置访问webpack-dev-server，除了通过FAST_REFRESH=false环境变量禁用快速刷新之外，我想不出其他方法来解决这个问题。

有没有人有更好的主意或解决方案？

Answer 1

我已经检查了你的CORS问题，当开发人员在不同的领域工作时，这总是面临的问题。

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

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

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

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

如果您的web应用程序需要从不同的域请求数据，并且您希望开发环境模拟从同一个域提供前端和后端服务的生产配置，请确保查看Create React App的proxy和src/setupProxy.js选项。他们会让你的应用程序开发变得更容易！

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