☰
React—— Next.js 配置 API 代理解决跨域问题
2026/11/3 23:14:44 网站建设 项目流程

什么是跨域?

当你的前端页面(比如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*',

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询