在开发前端应用时，经常需要调用后端 API 来获取数据。然而，由于浏览器的同源策略，直接跨域调用 API 是被禁止的。这时候，我们就需要使用一些技术手段来解决跨域问题。本文将介绍如何利用 Next.js 来跨域调用 API，并提供详细的示例代码。
什么是 Next.js？
Next.js 是一个 React 框架，它提供了 SSR（Server-Side Rendering，服务端渲染）和 SSG（Static Site Generation，静态网站生成）等功能。使用 Next.js 可以让我们更方便地开发 React 应用，并且可以提高应用的性能和 SEO（Search Engine Optimization，搜索引擎优化）。
跨域问题
在 Web 开发中，跨域指的是在一个域名下的网页去请求另一个域名下的资源。由于浏览器的同源策略，直接跨域调用 API 是被禁止的。同源策略是指，如果两个 URL 的协议、域名、端口号有一个不同，就被认为是跨域。
例如，我们的前端应用运行在 http://localhost:3000 上，而后端 API 运行在 http://api.example.com 上，这时候如果直接调用 API，就会被浏览器阻止。
解决跨域问题
为了解决跨域问题，我们可以使用以下两种方法：
- JSONP
JSONP（JSON with Padding）是一种跨域请求的解决方案。它的原理是利用 script 标签的 src 属性可以跨域请求资源的特性，将需要获取的数据封装在一个函数中，然后在服务端返回这个函数的调用，从而实现跨域请求。
JSONP 的缺点是只支持 GET 请求，并且容易受到 XSS（Cross-Site Scripting，跨站脚本攻击）攻击。
- CORS
CORS（Cross-Origin Resource Sharing）是一种跨域请求的解决方案。它的原理是在服务端设置一些 HTTP 头部，告诉浏览器允许跨域请求。具体来说，可以设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头部。
CORS 的优点是支持各种 HTTP 方法，并且相对安全可靠。
在使用 Next.js 进行跨域请求时，我们可以使用 CORS。具体来说，可以在 Next.js 应用的 API 路由中设置 HTTP 头部，从而允许跨域请求。
在 Next.js 中跨域调用 API
在 Next.js 中，我们可以使用 API 路由来定义自己的 API。API 路由是一个文件，位于 pages/api 目录下，可以接受 HTTP 请求并返回 JSON 数据。
为了实现跨域请求，我们需要在 API 路由中设置 HTTP 头部。具体来说，可以使用 res.setHeader() 方法设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头部。
下面是一个使用 CORS 的示例代码：
-- -------------------- ---- -------
-- ------------------
------ ------- ----- ---- -- -
-------------------------------------------- ----
--------------------------------------------- ----- ----- ---- --------
--------------------------------------------- ---------------
-- ----------- --- ------ -
---------------------- -------- ------- ------- --
- ---- -
---------------------
-
-在上面的代码中，我们设置了 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 头部，并且只允许 GET 请求。如果请求方法不是 GET，就返回 405 状态码。
在前端应用中调用 API
在前端应用中，我们可以使用 fetch() 方法来调用 API。fetch() 方法是浏览器内置的一种网络请求方法，它可以发送 HTTP 请求并返回 Promise 对象。
为了跨域调用 API，我们需要在 fetch() 方法中设置 mode: 'cors'，从而告诉浏览器允许跨域请求。
下面是一个使用 fetch() 方法调用 API 的示例代码：
-- -------------------- ---- -------
-- --------------
------ - -------- - ---- -------
------ ------- -------- ------ -
----- --------- ----------- - ------------
----- ----------- - -- -- -
------------------------------------- -
----- -------
------- ------
-------- -
--------------- ------------------
-
--
--------- -- -----------
---------- -- -------------------------
---------- -- -------------------
-
------ -
-----
------------------
------- ------------------------- --------------
------
-
-在上面的代码中，我们使用 fetch() 方法调用 http://api.example.com/hello 接口，并且设置了 mode: 'cors'，从而允许跨域请求。如果请求成功，就将返回的数据显示在页面上。
总结
使用 Next.js 跨域调用 API 可以让我们更方便地开发前端应用，并且提高应用的性能和 SEO。在实现跨域请求时，我们可以使用 CORS，从而允许跨域请求。具体来说，在 Next.js 应用的 API 路由中设置 HTTP 头部即可。在前端应用中，我们可以使用 fetch() 方法来调用 API，并且设置 mode: 'cors'，从而允许跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65139a4b95b1f8cacdc04894