相信大多数的伙伴在第一次通过vue + spring 做项目的时候都会遇到这个问题
什么是同源策略和跨域问题
同源策略指的就是,浏览器出于安全考虑,实施的一种策略,即只允许来自同一源(即协议+域名+端口都相同)的请求访问资源. 否则就会导致跨域问题
例如:
http://xxx.com -> https://xxx.com 存在跨域问题,因为协议不同
127.x.x.x:8081 -> 127.x.x.x:8082 存在跨域问题,因为端口不同
www.xxx.com -> www.yyy.com 存在跨域问题,因为域名不同
解决
通过中间人(代理服务器)来解决,即前端 – > 代理服务器 – > 后端,看似很难,实际上就几行代码
在vue中,配置代理规则
export default defineConfig({plugins: [//...],resolve: {//...},server: {proxy: {"/dev-api": {target: "http://127.0.0.1:19090/system",rewrite: (p) => p.replace(/^\/dev-api/,""),}}}
})
修改baseUrl
const instance = axios.create({baseURL: '/dev-api',timeout:5000
})
