做前后台分离的项目,碰到各种问题,记录一下。
这次主要是跨域问题,前台的地址是http://localhost:8080 ,后台的地址是:http://localhost:8000
前台通过axios调用后台接口,配置了proxy之后,还是有跨域的报错,下面是vue.config.js配置
module.exports = {
// 开发服务器的配置
devServer:{
proxy:{
// 以前发请求是http或https开头
// 自定义请求的开头,使用代理的方式
"/api":{
// 代理到那个服务器
target:'http://localhost:8000',
changeOrigin:true, //转发的target与当前服务器有变更
pathRewrite:{
// 实际发送请求是,把开头的/api删除,这个是代理的标识,并不是请求的一部分
'^/api':'',
}
},
},
}
}
调用后台接口的代码如下:
//这里的/api是一定要写的!!!
let url = '/api/login/login'
this.axios.post(url,params).then(res=>{
console.log(res)
})
个人就是因为没写/api,所以一直报跨域的错,属实是学艺不精了。