Next.js 和 Express 的 CORS 问题：对预检请求的响应未通过访问控制检查：答案

【问题标题】：CORS issue with Next.js and Express: Response to preflight request doesn't pass access control check:Next.js 和 Express 的 CORS 问题：对预检请求的响应未通过访问控制检查：
【发布时间】：2021-09-26 04:05:44
【问题描述】：

我在 Heroku 上有一个发送电子邮件的简单 Express 应用程序。我在 Next.js/Vercel 上有一个客户。

我的后端配置如下：

const createError = require("http-errors");
const express = require("express");
const logger = require("morgan");
const cors = require("cors");
const nodemailer = require("nodemailer");

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

...

app.options("/", cors(), function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "myclient.site");
  res.setHeader("Access-Control-Allow-Methods", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.end();
});


app.post("/", (req, res)=>{
//code
})

而我的客户端请求函数是这样的：

const sendInfo = (data) => {
  axios("heroku.api", {
    method: "post",
    withCredentials: true,
    data: {
    ...
    },
  });
};

我得到的确切错误响应是这样的，

Access to XMLHttpRequest at 'heroku.api' from origin 'client.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

【问题讨论】：

你为什么要使用中间件和试图手动设置标题？有关示例，请参阅文档：npmjs.com/package/cors#configuring-cors
我正在尝试一个组合，希望它能起作用，因为我已经尝试了给定的示例。我现在也在试，还是不行。
为什么不在 Next.js 中也写后端？
@brc-dd 这就是我所做的 - 我不知道为什么会出现 cors 问题。它的设置方式与其他应用程序的工作方式相同。我认为正在发生一些与在 Vercel 上托管有关的事情。但是使用 NExt 中的 API 端点，一切都很好。

标签： javascript node.js express cors next.js

【解决方案1】：

您可以通过 app.use(cors()); 在所有路由中实现 cors 来进行测试示例here 希望它有效！

【讨论】：