这是为了解决vue 和SpringBoot交互而做的,由于vue的机制问题,是一定会存在跨域问题。
如何解决是一个问题:
我经过学习之后,找到了两个方法,一个是vue进行配置,一个是springboot配置。
(1)SpringBoot:
@CrossOrigin 注解可以解决跨域问题。
其中@CrossOrigin中的2个参数:
origins :允许可访问的域列表
maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
(2)vue.config.js配置
在vue.config.js里的devServer里面加上
proxy: { //配置跨域
'/api': {
target: 'http://localhost:8282', //这里后台的地址模拟的;应该填写你们真实的后台接口
ws:true,
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
'^/api': ''
}
},
}
注意 target: 'http://localhost:8282', 就是你想要访问的域名地址,不要加上/api/(这个坑死我了)。
使用的时候:
let url4 = '/api/login/loginIn'
let data = {account:this.loginForm.name,password:this.loginForm.password};
// var that = this;
axios.post(url4,data).then(res=>{
console.log("请求成功!="+res.data);
window.sessionStorage.setItem("token",this.loginForm.name); //会话存储
// Router.push('/home')
that.$router.push('/home')//路径跳转
})