express - 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 Routes 同源，如需自定义可使用 micro-cors .