时间戳

首页 > 解决方案 > Express Server API 到 Next.js 的 CORS 问题

express - Express Server API 到 Next.js 的 CORS 问题

问题描述

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

标签： expressauthenticationcorsnext.jsisomorphic-fetch-api

解决方案

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

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

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

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

推荐阅读