反应前端，节点后端CORS问题[关闭]

Posted 2023-03-04

【中文标题】反应前端，节点后端CORS问题[关闭]

【英文标题】：React frontend, node backend CORS issue [closed]

【发布时间】：2021-09-04 00:50:44

【问题描述】：

我正在使用以下代码从我的 React 应用程序发送一个发布请求。

// https://react-app.com

await fetch('https://node-backend-on-aws-lambda-api.com/stage/resource', 
    method: 'POST',
    headers: 
        'Content-Type': 'application/json',
    ,
    mode: 'cors',
    body: JSON.stringify(jsonData),
)

在服务器端，我使用cors node.js package 启用了cors，如下所示：

// https://node-backend-on-aws-lambda-api.com/stage/resource

var cors = require('cors')
...
var app = express();
app.use(cors());

但是当我尝试向我的节点后端发送一个发布请求时，我仍然得到这个响应？！

Access to fetch at 'https://node-backend-on-aws-lambda-api.com/stage/resource' 
from origin 'https://react-app.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 
resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the 
resource with CORS disabled.

通过直接从浏览器访问服务器 url https://node-backend-on-aws-lambda-api.com/stage/resource 我看到正确的标题已经到位（见图）

---

这个图片是我直接访问node后端时的headers

---

这张图片是我从我的 React 应用获得的标题

我还需要做什么？

【问题讨论】：

您的节点后端是否正确响应了预检请求 (developer.mozilla.org/en-US/docs/Glossary/Preflight_request)？

我想是的，我怎么确定呢？考虑到服务器头包含access-control-allow-methods和相关方法，是不是就不能假设preflight没问题？

预检是一个OPTIONS 请求。您的节点后端可能根本不会威胁 OPTIONS 请求。在浏览器的开发工具面板中查看网络标签。

尝试将app.options('/stage/resource', cors()) 添加到您的快递服务器。

嗨 Andor，我添加了那行代码，但仍然出现 CORS 错误。

【参考方案1】：

我发现了问题。我将 AWS Lambda 函数与 API Gateway 结合起来。如果 Lambda 函数出现错误或崩溃，API Gateway 仍将响应 HTTP 状态代码 200，但没有任何所需的标头。因此，当在生产环境中测试服务崩溃和后端代码中的错误时，将给出 200 响应，并且没有 CORS 传递标头。

通过在 lambda 函数本身中将修复推送到后端代码来解决问题。

【参考方案2】：

正如错误所说：

请求中没有“Access-Control-Allow-Origin”标头

您应该在服务器端设置 CORS 的选项。试试这个：

const cors = require('cors');

const corsOptions = 
  origin: (origin, callback) => 
    callback(null, true);
  ,
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
  allowedHeaders: ["Access-Control-Allow-Origin", "Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization"],
  credentials: true
;

app.options('*', cors(corsOptions));
app.use(cors(corsOptions));

【讨论】：

嘿艾哈迈德，谢谢你的回答，不幸的是，仍然出现同样的错误。我相信正如之前有人所说，这与部署到 AWS Lambda 的代码有关。