网页具有动画网站建设技术网站空间数据库需要多大

解决 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 鉴权）

---

注意事项

1. 避免使用通配符 *

   • 若配置 Access-Control-Allow-Origin: *，浏览器会拒绝携带凭证的请求（如 Cookies）。
   • 必须明确指定 value: "http://127.0.0.1:8999"（末尾无斜杠）。

2. 路径匹配规则

   • source: "/api/:path*" 匹配：
     • ✅ /api/data
     • ✅ /api/user/profile
     • ❌ /internal-api（不匹配）

3. 生产环境调整

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

     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 是否覆盖了请求头。

---

总结

通过定制 next.config.js 的 headers() 方法，我们精准控制了 CORS 策略，实现了安全的前后端协作开发。此方案避免了引入额外中间件，保持 Next.js 项目简洁性。完整配置见 Next.js 官方文档。

提示：若项目使用 App Router，此配置同样生效；需重启服务使配置生效（npm run dev）。