CORS 跨域问题 Next.js 跨域问题放通

解决 Next.js 跨域问题全记录：`next.config.js` 配置实战

问题背景

在前后端分离开发中，前端（Next.js）运行在 localhost:3000，后端 API 服务在 http://127.0.0.1:8999 时，浏览器会因 同源策略（Same-Origin Policy） 拦截跨域请求，抛出如下错误：

复制代码

Access to fetch from 'http://localhost:3000' to 'http://127.0.0.1:8999/api/data' has been blocked by CORS policy.

解决方案

通过 Next.js 的 服务端响应头配置 ，在 next.config.js 中动态注入 CORS 头信息，放行指定来源的请求。

配置代码示例

javascript 复制代码

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        // 匹配所有 /api 开头的请求路径
        source: "/api/:path*",
        headers: [
          // 允许携带 Cookie 等凭证
          { key: "Access-Control-Allow-Credentials", value: "true" },
          // 放行指定来源（避免使用通配符*）
          { key: "Access-Control-Allow-Origin", value: "http://127.0.0.1:8999" },
          // 允许的 HTTP 方法
          { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT,OPTIONS" },
          // 允许的自定义请求头
          { 
            key: "Access-Control-Allow-Headers", 
            value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization"
          }
        ],
      },
    ];
  },
};

关键配置解析

配置项	作用说明
`source: "/api/:path*"`	匹配所有以 `/api` 开头的路由（如 `/api/user`）
`Access-Control-Allow-Credentials`	允许携带 Cookie、Authorization 等凭证
`Access-Control-Allow-Origin`	精确指定来源（避免用 `*`，否则无法携带凭证）
`Access-Control-Allow-Methods`	声明服务端支持的 HTTP 方法
`Access-Control-Allow-Headers`	允许客户端发送的自定义头（如 `Authorization` 用于 JWT 鉴权）

注意事项

避免使用通配符 *
- 若配置 Access-Control-Allow-Origin: *，浏览器会拒绝携带凭证的请求（如 Cookies）。
- 必须明确指定 value: "http://127.0.0.1:8999"（末尾无斜杠）。
路径匹配规则
- source: "/api/:path*" 匹配：
  - ✅ /api/data
  - ✅ /api/user/profile
  - ❌ /internal-api（不匹配）

生产环境调整

部署时需将来源替换为真实域名：

javascript 复制代码

value: process.env.NODE_ENV === "production" 
  ? "https://your-production-domain.com" 
  : "http://127.0.0.1:8999"

验证配置是否生效

使用 curl 测试响应头：

bash 复制代码

curl -I http://localhost:3000/api/test

输出应包含：