在前端开发中，我们经常使用 Ajax 来进行数据交互。但是在实际开发中，可能会遇到 Ajax 跨域的问题。下面我将以 Next.js 为例，介绍如何解决跨域问题，同时给出示例代码。
什么是跨域及其解决方案
跨域是指在浏览器同源策略的限制下，不同域名之间的网页不能相互访问。同源是指协议、主机名、端口号都相同，即使在不同的路径下也不能访问。解决跨域问题主要有以下几种方法：
JSONP：在请求 URL 中添加一个回调函数名，服务器返回一段 JavaScript 代码，前端利用该代码实现回调函数的调用并获取数据。
CORS：前端发送跨域请求时，在 HTTP 头信息中添加 Origin 字段，服务器端返回允许跨域访问的 HTTP 头信息。
反向代理：在后端配置反向代理服务器，将请求转发到目标服务器，前端与反向代理服务器间接交互。
Next.js 中使用 CORS 解决跨域问题
Next.js 是一个基于 React 的服务端渲染框架，在使用 Ajax 时可能会遇到跨域问题。我们可以使用 CORS 解决跨域问题。
我们可以在 Next.js 中使用 micro-cors 这个库来设置允许跨域的 HTTP 头信息。在后端 API 中添加 CORS 头信息的代码如下所示：
// www.javascriptcn.com code example
const cors = require('micro-cors')();
const handler = (req, res) => {
// 其他逻辑代码
}
module.exports = cors(handler);
代码中 micro-cors 是一个轻量级的跨域处理库，它为我们自动添加了允许所有请求的 CORS 头信息。也可以通过 cors(corsOptions) 这种方式自定义允许的请求类型和允许的域名等信息。
示例代码
接下来给出一个示例代码，展示如何使用 CORS 解决 Next.js 中的跨域问题。
// www.javascriptcn.com code example
import React, { useState } from 'react'
import axios from 'axios'
// 自定义查询 API
const queryAPI = async () => {
const { data } = await axios.get('/api/query')
return data
}
const Home = () => {
const [data, setData] = useState(null)
const handleQuery = async () => {
const result = await queryAPI()
setData(result)
}
return (
<div>
<button onClick={handleQuery}>查询数据</button>
{
data &&
<pre>
{JSON.stringify(data, null, 2)}
</pre>
}
</div>
)
}
export default Home
上述代码中，在点击“查询数据”按钮时，会调用 queryAPI 函数来获取数据。queryAPI 函数使用 axios 库发送请求，并指定了请求路径为 /api/query。在后端 API 中添加如下代码，就可以解决跨域问题：
// www.javascriptcn.com code example
const cors = require('micro-cors')();
const handler = (req, res) => {
// 允许跨域请求
res.setHeader('Access-Control-Allow-Origin', '*');
// 设置 Content-Type 为 JSON 格式
res.setHeader('Content-Type', 'application/json');
// 其他逻辑代码
}
module.exports = cors(handler);
在上述代码中，我们使用了 micro-cors 库来自动添加跨域所需的 HTTP 头信息。并且在 handler 函数中添加了允许跨域请求和设置响应头信息的代码。这样前端就可以正常访问 API，获取返回的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d01d9de46428fe9ecbd2b1