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

跨域问题之前后端解决办法

news 2025/6/16 5:26:22

由于浏览器有同源策略同源是指（协议+域名+端口）相同的请求访问资源否则就会出现跨域问题

http://xxx.com -> https://xxx.com 存在跨域协议不同
127.x.x.x.:8081 -> 127.x.x.x.:8082 存在跨域端口不同
www.xxxx.com -> www.yyyy.com 存在跨域域名不同

上述图片可以看到是端口号不同导致的跨域问题

如何解决跨域问题？

1.1 前端配置代理

前端请求先访问前端服务器（代理）

由于前端请求和前端服务器协议、域名（ip）、端口一致所以不会出现跨域问题

由前端服务器把请求发给后端服务器

后端服务器把响应返回给前端服务器（代理）

代理再把响应返回给浏览器

客户端浏览器(http://localhost:5173) → 前端开发服务器（http://localhost:5173/api/sysUser/login）发送 POST 请求。
前端服务器(http://localhost:5173/api/sysUser/login) → 后端服务器（http://localhost:9999/sysUser/login）代理转发请求（内部服务器间通信）。
后端服务器 → 前端开发服务器：返回响应（如登录成功/失败的 JSON 数据）。
前端开发服务器 → 客户端浏览器：转发后端响应。

server: {proxy: {// 匹配所有以 `/api` 开头的请求路径'/api': {// 目标后端地址（代理转发到的真实后端）target: 'http://127.0.0.1:9999',// 允许跨域（默认 true，可省略）changeOrigin: true, // 重写路径：将 `/api/user` 转为 `/system/user`（如果后端接口前缀是 `/system`）rewrite: (path) => path.replace(/^\/api/, ''),},},},