create-react-app Web 服务器使用 CORS 标头响应

Question

这是一种独特的情况，因为我需要使用来自服务器的 CORS 标头进行响应，但服务器是运行 react 应用程序的 create-react-app 服务器。

我有 2 个反应应用程序，app1（端口 3002）、app2（端口 3001）和 1 个后端（端口 3000）。当我从 app1 向后端 (/api) 发出请求时，它会向 app2 发送 302 重定向。这会导致浏览器抛出 CORS 错误，因为 app2 没有响应带有 access-control-allow-origin 标头的预检 OPTIONS 请求。有没有办法配置 CRA 开发服务器以响应此标头？或者也许这些标头可以通过 app1 上的某个代理添加？

错误

CORS 策略已阻止从源“http://localhost:3002”访问“http://localhost:3001/”处的 XMLHttpRequest（从“http://localhost:3002/api”重定向）：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我在 app1 上试过了，但没有成功：

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
      onProxyRes: response => {
        response.headers['access-control-allow-origin'] = 'http://localhost:3002';
      },
    })
  );
};

我猜我可能需要向 app2 上的服务器添加一些配置，以便它响应预检请求，但我不知道如何。

更新： 我找到了node_modules/react-scripts/config/webpackDevServer.config.js 并添加了

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"
    },

这会将标头添加到 CORS 请求中，但并不是真正的永久解决方案。我想我必须使用 craco 来做到这一点？

Answer 1

为此，您可以使用 craco。在项目根文件夹中：

yarn add -D @craco/craco
touch craco.config.js

craco.config.js

module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "https://example.com",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
      "Access-Control-Allow-Credentials": "true"
    },
  }
};

注意：这只会编辑开发服务器配置。这允许服务器使用 cookie（允许凭据）发起重定向。