在 Next.js 中如何处理跨域 (CORS) 问题？

Question

Accepted Answer

在 Next.js 中处理跨域（CORS）问题，主要取决于你的使用场景。通常有两种完全不同的情况： 1. 场景 A（代理转发）： 你的 Next.js 前端需要调用外部 API（例如 Java/Go/Python 后端），但浏览器报 CORS 错误。 2. 场景 B（作为服务端）： 你的 Next.js 提供了 API 接口，其他前端应用（如 App 或其他网站）来调用你的接口，你需要允许它们跨域。 以下是针对这两种场景的详细解决方案： --- 场景 A：Next.js 前端调用外部 API (解决开发环境跨域) 这是最常见的情况。浏览器禁止 直接请求 。 最佳解决方案：使用 Next.js Rewrites (重写/代理) 原理：利用 Next.js 的服务端作为中转。浏览器请求 Next.js (同源)，Next.js 服务端请求外部 API (服务端之间没有 CORS 限制)。 在 中配置： 前端调用方式： --- 场景 B：Next.js 作为 API 服务端 (允许他人跨域调用) 如果你在使用 Next.js 的 API Routes (App Router 或 Pag...