[Express Server API到Next.js的CORS问题

Question

我在本地主机端口3333中使用Express和Node.js进行了用户身份验证服务器设置，我正在尝试使用isomorphic-unfetch进行提取，以连接到Next.js端口3000中的端点。我收到CORS 401错误，我已经做了相当多的研究，但是只是想知道是否有可能连接到本地主机上的Express服务器？我尝试将“ Access-Control-Allow-Origin”：“ *”，“ Content-Type”：“ multipart / form-data”添加到标题对象。 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。