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

Posted 2023-03-04

【中文标题】create-react-app Web 服务器使用 CORS 标头响应

【英文标题】：create-react-app web server respond with CORS headers

【发布时间】：2021-07-14 19:27:44

【问题描述】：

这是一种独特的情况，因为我需要使用来自服务器的 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 来做到这一点？

【问题讨论】：

您在这里看到的确切错误是什么？如果您的浏览器被重定向到 app2，则该请求不会通过 app1 的代理。

嘿@jonrsharpe 感谢您的回复，我在上面添加了错误。 “从 x 到 y 的重定向已被阻止”。

那真的应该是 XHR 吗？为什么看似后端 API 请求会涉及重定向到单独的客户端应用程序？

例如Oauth2.0响应auth code请求重定向，code为查询参数。

在 Web 流程中（参见例如 docs.github.com/en/developers/apps/…），您不知道也不关心提供者的页面是如何实现的 - 您将用户发送到例如github.com/login/oauth/authorize 带有一些查询参数来识别您的应用等，然后一段时间后它们会出现在您的网站上，并带有您的后端可以交换令牌的代码。

【参考方案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（允许凭据）发起重定向。

【讨论】：

这对任何人都有效吗？我这样做了，但是没有添加 cors 标头，并且我不断遇到 cors 问题。不知道发生了什么。