CORS (Cross-Origin Resource Sharing) 是一种浏览器安全策略，用于防止跨域请求。当在 Next.js 中使用 fetch 请求时，如果请求的地址与当前页面不在同一个域内，可能会遇到 CORS 问题。本文将介绍如何在 Next.js 中处理 CORS 问题，以便您能够在应用程序中无缝处理跨域请求。
什么是 CORS？
CORS 是一项 Web 浏览器安全策略，用于防止跨域请求。它通过在 HTTP 头中添加一个额外的响应头来告诉浏览器，哪些站点可以访问服务器上的数据。当浏览器发送跨域请求时，服务器将检查该请求是否在允许的请求列表中，如果不在，服务器就会拒绝该请求。
如何在 Next.js 中处理 CORS 问题？
下面是在 Next.js 中使用 fetch 处理 CORS 问题的步骤：
1. 在服务器端启用 CORS
在服务器端启用 CORS 可以允许来自其他域的页面访问资源。您可以使用 npm 软件包 cors 来启用 CORS，该软件包是一个 Node.js 中间件。
安装 cors：
npm install cors
启用 cors（在 pages/api 目录下的 api.js 文件中）：
-- -------------------- ---- ------- ------ ---- ---- ------- -- --- ---- ----- ---- - ------ -------- ------- -------- --- ------ ------- ----- ----- ---- -- - -- -- ---- ----- --------- ----- -- ------ ----- ---- - ----- ------------ --------------------------- --
在此示例中，我们使用 Cors() 初始化了 cors 中间件，并使用 cors(req, res) 启用了 CORS。还可以设置允许的方法（这里我们只允许 GET 和 HEAD）。在处理逻辑之前启用 CORS 以确保响应头正确设置。然后处理您的逻辑并返回响应。
2. 发送带有 CORS 的请求
现在您已经在服务器端启用了 CORS，可以使用 fetch 从客户端发出带有 CORS 的请求。在 Next.js 中，您可以在 pages/api 目录下创建一个 API 函数，该函数将在服务端和客户端通用，并使用 fetch 进行网络请求。
例如，在 pages/api/data.js 中：
-- -------------------- ---- -------
------ ------- ----- ----- ---- -- -
----- --- - ---------------------------
----- -------- - ----- ---------- -
------- ------
-------- -
--------------- -------------------
------------------------------ ----
--
---
----- ---- - ----- ----------------
---------------------------
--在此示例中，我们发出带有 CORS 的 GET 请求，并将接收到的 JSON 数据返回给客户端。重要的是要注意，在请求头中添加 "Access-Control-Allow-Origin": "*"，这表示允许所有域对此资源进行访问，并解决了 CORS 问题。
示例代码
以下是完整的示例代码，以供参考。
-- -------------------- ---- -------
-- -----------------
------ ---- ---- -------
------ ----- ---- ---------------------
-- ------- ----
----- ---- - ------
-------- ------- --------
---
------ ------- ----- ----- ---- -- -
-- -- ----
----- --------- -----
-- ---- ---- ---
----- --- - ---------------------------
----- -------- - ----- ---------- -
------- ------
-------- -
--------------- -------------------
------------------------------ ----
--
---
----- ---- - ----- ----------------
---------------------------
--总结
CORS 是一项浏览器安全策略，用于防止跨域请求。当在 Next.js 中使用 fetch 请求时，可能会遇到 CORS 问题。为了解决这个问题，您可以在服务器端启用 CORS，并在客户端发出带有 CORS 的请求。本文介绍了在 Next.js 中处理 CORS 问题的步骤，并提供了示例代码。希望这篇文章可以帮助您解决在 Next.js 中使用 fetch 请求遇到的 CORS 问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66475423d3423812e45a2d15