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

Question

我正在使用以下代码从我的 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 应用获得的标题

我还需要做什么？

Answer 1

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

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

Answer 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));