当前位置：首页 > news >正文

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

news 2025/8/9 14:31:15

解决 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 头信息，放行指定来源的请求。

配置代码示例

// 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（不匹配）

生产环境调整

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

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

验证配置是否生效

使用 curl 测试响应头：

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

输出应包含：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://127.0.0.1:8999
Access-Control-Allow-Methods: GET,DELETE,PATCH,POST,PUT,OPTIONS

常见问题排查

Q：配置后仍提示跨域错误？
- 检查来源地址是否与配置 完全一致（如协议、端口）。
- 确保后端未重复设置 CORS 头（可能导致冲突）。
Q：OPTIONS 预检请求失败？
- 确认 Access-Control-Allow-Methods 包含 OPTIONS 方法。
- 检查 Access-Control-Allow-Headers 是否覆盖了请求头。