NextJS前端请求外部网站遇CORS错误，API路由无异常

为什么后端API路由正常，前端直接请求报错？ #

CORS是浏览器的同源安全限制，只有浏览器发起的跨域请求才会触发该校验。后端API路由是在服务器端发起请求，不受浏览器的CORS规则约束，所以能正常请求外部网站。而前端直接请求时，浏览器会检查外部网站返回的响应头是否包含Access-Control-Allow-Origin且允许你的域名，对方服务器没配置的话，就会抛出CORS错误。

另外你前端代码里存在一个误区：Access-Control-Allow-Origin是服务器返回给浏览器的响应头，你在前端请求里添加这个字段完全没用，反而可能干扰正常请求逻辑。

解决办法 #

方案1：复用现有后端API路由（推荐） #

前端不要直接请求外部网站，而是调用你自己的API路由，由后端完成转发请求的操作。修改前端代码如下：

const fetchPageFromSite = async () => {
  await fetch('/api/你的路由路径', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ url: 目标网站URL })
  });
}

这样前端请求的是同域的API接口，不会触发CORS校验，实际请求由后端代理完成。

方案2：用NextJS重写配置代理 #

在next.config.js中添加重写规则，把前端对外部网站的请求转发到服务器端处理：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/proxy/:path*',
        destination: 'https://目标网站域名/:path*', // 替换为你要请求的外部网站域名
      },
    ]
  },
}

module.exports = nextConfig

之后前端请求时用/proxy/xxx代替直接请求外部URL：

async function getPage(path: string) {
  const response = await fetch(`/proxy/${path}`);
  // do stuff
}

这种方式也能规避CORS问题，因为请求实际由NextJS服务器转发。

方案3：让外部网站配置CORS（不推荐） #

联系外部网站管理员，让他们在服务器响应头中添加Access-Control-Allow-Origin: 你的前端域名，或者允许所有域名*。但该操作通常不在你的控制范围内，仅作为备选方案。

内容的提问来源于stack exchange，提问作者Andrea D'Attero