CORS 与 Express Server API 的问题到下一个.js

Question

我在本地主机端口 3333 中使用 Express 和 Node.js 设置了用户身份验证服务器，我正在尝试使用 Next.js 端口 3000 中的端点进行提取。我收到CORS 401错误，我已经做了相当多的研究，但只是想知道是否可以连接到本地主机上的Express服务器？我尝试将"访问控制允许来源"："*"，"内容类型："多部分/表单数据"添加到标头对象。快递服务器已经设置了 cors。

单击按钮即可调用下面的此函数。

onLoginClick = async () => {
let header = new Headers({
"Access-Control-Allow-Origin": "*",
"Content-Type": "multipart/form-data"
});
const res = await fetch("http://localhost:3333", {
method: "POST",
header,
body: JSON.stringify({
username: "USER",
password: "PASSWORD"
})
});
}

错误信息-

http://localhost:3333/ 401 (Unauthorized)
Response {type: "cors", url: "http://localhost:3333/", redirected: false, status: 401, ok: false, …}

Answer 1

首先，CORS 是在服务器端配置的。您可以将服务器配置为允许来自特定源的呼叫。

在您的代码中，onLoginClick是客户端代码，它在浏览器上运行，客户端无法决定服务器应该允许哪个源，这将破坏拥有 CORS 的目的。

通常，无需更改 Next.js 应用中的 cors 配置，因为您将从托管客户端应用的同一源调用 API。

默认情况下，Next.js只支持 API 路由的同源，如果需要自定义，可以使用 micro-cors。