文章目录
跨域配置
vue-cli搭建的项目需要自己新建一个vue.config.js配置文件:
在vue.config.js文件里配置跨域参数:
module.exports = {
devServer:{
open:true,
proxy: {
'/api': {
//设置你调用的接口域名和端口号 别忘了加http
target: 'http://localhost:8088/',
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
//会将请求/api/xuanke/index.php替换为/xuanke/index.php
}
}
}
}
}
配置好了,但还是vue默认的端口
根据我的踩坑经历,下面这一段解释建议你看一下,会避免一些问题
‘/api’ 是你请求开头必须写的格式,不是你后台接口的路径,例如:
我要访问的后端api为
根据我上面配置内容,我的get请求地址
this.$http.get("/api/xuanke/Student/login.php").then(res=>{
console.log(res.data);
})
所以我可以根据简便这样配置:
proxy: {
'/xuanke': {
target: 'http://localhost:8088/',
changeOrigin: true,
pathRewrite: {
'^/xuanke': '/xuanke'
}
}
}
如果我根据第一种配置,然后请求地址写成了
/xuanke/Student/login.php
那就会出现这种问题:
很清楚可以看到这里的端口并不是我配置的跨域地址端口8088,而是vue脚手架默认的端口8080