IT博客汇 | 一日一技：next.js如何正确处理跨域问题？

一日一技：next.js如何正确处理跨域问题？

青南发表于 2024-01-18 14:01:06

我以前一直使用Vue来写前端。去年下半年接手了一个基于React + Next.js的项目，于是顺带学习了一下Next.js。由于Next.js的特点，这个项目的前后端是放在一起的。一开始没什么问题，看了半天文档就上手了。

上周我们需要在另一个网页项目中，调用这个项目的后端接口，于是就需要处理跨域请求的问题。但我发现按照网上的方法，跨域问题依然存在。这个问题浪费了我不少时间，好在最后终于找到了原因。记录在这里，免得大家跟我一样踩坑。

为了复现这个问题，我们先来创建一个Next.js项目。执行代码创建代码脚手架：

1	npx create-next-app test_cors

使用TypeScript，其他选项选择默认，如下图所示：

命令执行完成以后，会生成一个test_cors文件夹，在文件夹中创建文件pages/api/test.ts。内容如下：

import { NextResponse } from 'next/server'


export const config = {
    runtime: "edge"
}

export interface UserInfo {
    name: string
    age: number
    address: string
}


const handler = async (req: Request): Promise<Response> => {
    
    const user = (await req.json()) as UserInfo
    return NextResponse.json({success: true,
                              msg: `你的名字是${user.name}, 今年${user.age}岁`})
}

export default handler;

如下图所示：

然后运行命令npm run dev。这个后端接口就启动起来了。我们可以使用Postman来进行测试：

接下来，我们来写一段HTML代码，触发跨域问题：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>API 请求示例</title>
    <script>
        // 当按钮被点击时执行此函数
        function sendRequest() {
            // 创建一个新的 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 配置请求类型、URL 以及异步处理
            xhr.open('POST', 'http://127.0.0.1:3000/api/test', true);

            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            // ... 其他请求头设置

            // 设置响应类型
            xhr.responseType = 'json';

            // 定义请求完成的回调函数
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 请求成功，处理响应数据
                    document.getElementById('response').innerText = JSON.stringify(xhr.response);
                } else {
                    // 请求失败，处理错误
                    document.getElementById('response').innerText = '请求失败: ' + xhr.status;
                }
            };

            // 发送请求
            xhr.send(JSON.stringify({name: "青南", age: 20, "address": "上海"}));
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">发送请求</button>
    <div id="response"></div>
</body>
</html>

直接双击打开这个html文件，点击页面上的按扭，就会触发跨域报错，如下图所示：

然后，你在网上用关键词搜索next.js 跨域或者next.js cors，一般看到的文章都会让你直接在next.config.js文件中添加响应头，如下图所示：

你按照这些文章中写到方法加了配置，重启服务，然后用Postman来测试，你会发现返回的响应头里面确实已经有这几项了，如下图所示：

但当你使用HTML页面来测试时，跨域的报错还在。

你连续打开Google上面10篇讲Next.js跨域的文章，无论是中文博客还是英文博客，甚至你直接使用ChatGPT来问，他们给你的回复肯定都是上面的这个方法。但是无论你怎么测试，跨域问题还在。

实际上，跨域就是这样配置的。你的配置没有任何问题。问题出现在你的后端代码上，如下图所示：

首先你需要是一个POST请求，你才能执行await req.json()。而浏览器在判断能不能跨域时，会首先发送一个OPTIONS请求，如下图所示：

这个请求也会走到你的这段后端代码里面。但由于OPTIONS请求没有Body，于是代码运行到await req.json()时，就会报错。于是浏览器认为OPTIONS请求没有返回status 200，因此强行认为你的接口不支持跨域。

那么解决方法也非常简单，提前判断一下请求方法是不是OPTIONS就可以了：

1
2
3

if(req.method === 'OPTIONS') {
    return NextResponse.next()
}

如下图所示：

运行效果如下图所示，跨域成功：

这个问题对于资深前端来说，可能不值一提。但对于后端兼职前端的人，或者第一次接触Next.js的人来说，可能是一个深坑，会浪费很多的时间。

未闻Code Telegram Channel开通了！每天都有各种开发小技巧更新，速来！！