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：
--- ------- ----
启用 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