如何进行网站设计规划,美图秀秀怎么制作素材图片,企业移动网站建设,263企业邮箱下载客户端由于浏览器有同源策略 同源是指 #xff08;协议域名端口#xff09;相同的请求访问资源 否则就会出现跨域问题 http://xxx.com - https://xxx.com 存在跨域 协议不同 127.x.x.x.:8081 - 127.x.x.x.:8082 存在跨域 端口不同 www.xxxx.com - www.yyyy.com 存在跨…由于浏览器有同源策略 同源是指 协议域名端口相同的请求访问资源 否则就会出现跨域问题 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如果后端接口前缀是 /systemrewrite: (path) path.replace(/^\/api/, ),},},}, 1.2 后端增加CrossOrgin注解
