仅Safari出现CORS错误，其他浏览器正常，求解决方案

仅在Safari出现这个跨域错误，核心原因是Safari对跨域请求的校验比其他浏览器更严格，直接在前端调用第三方API容易触发CORS限制。用NextJS的API路由做代理是最可靠的解决方法，步骤如下：

1. 创建NextJS代理API路由 #

根据你使用的路由方案，选择对应的方式创建路由文件：

若使用Pages Router #

在项目根目录的pages/api文件夹下新建random-user.js，写入以下代码：

export default async function handler(req, res) {
  try {
    // 服务器端请求randomuser.me API，不受浏览器CORS限制
    const response = await fetch('https://randomuser.me/api');
    const data = await response.json();
    // 将结果原封不动返回给前端
    res.status(response.status).json(data);
  } catch (err) {
    res.status(500).json({ error: '获取随机用户失败' });
  }
}

若使用App Router #

在项目根目录的app/api文件夹下新建random-user文件夹，再创建route.js，写入以下代码：

export async function GET() {
  try {
    const response = await fetch('https://randomuser.me/api');
    const data = await response.json();
    return Response.json(data);
  } catch (err) {
    return Response.json({ error: '获取随机用户失败' }, { status: 500 });
  }
}

2. 修改前端调用代码 #

把原来直接请求第三方API的代码，改成请求自己的代理路由：

async function getRandomUser() {
  try {
    // 请求同域的API路由，避免跨域问题
    const response = await fetch('/api/random-user');
    const data = await response.json();
    return data.results;
  } catch (err) {
    console.log(err);
  }
}

为什么这个方法有效？ #

浏览器的CORS限制只针对前端发起的跨域请求，而通过NextJS的API路由发起请求是在服务器端进行的，服务器端请求不受浏览器CORS政策约束。代理路由会把第三方API的结果返回给前端，此时前端请求的是同域地址，自然不会触发CORS错误。

内容的提问来源于stack exchange，提问作者Kentrell Jr