React—— Next.js 配置 API 代理解决跨域问题

什么是跨域？

当你的前端页面（比如http://localhost:3000）请求另一个域名的接口（比如http://api.example.com），浏览器会阻止这个请求，这就是跨域问题。

前端页面: http://localhost:3000 API接口: http://api.example.com:8080 ↑ 域名/端口不同，浏览器拒绝请求

解决方案：配置代理

代理的原理很简单：让前端请求自己的服务器，再由服务器转发给 API。

浏览器 → 前端服务器(代理) → API服务器 同源，不跨域 服务器之间无跨域限制

Next.js 代理配置

在next.config.js中配置rewrites：

// next.config.jsmodule.exports={asyncrewrites(){return[{source:'/api/:path*',