vue-cli 的反向代理设置
情况1
1.在根目录下创建vue.config.js文件
在该文件下,写入如下代码(每次修改配置文件之后要重启)
module.exports = {
publicPath: './',
devServer: {
port: 8080,
open: true,
// 反向代理配置
proxy: {
'/api': {
target: 'http://xxxxx.com/',// 代理的目标服务器地址
changeOrigin: true,//是否改变源(必填)
pathRewrite: { "^/api": "" }// 重写路径运行后就代理到对应的地址
}
}
}
}
效果
http请求本来是axios.get('http://xxxxx.com/banner')
现在就可以写成axios.get('/api/banner') 实现跨域
这种情况必须要有pathRewrite: { "^/api": "" }
情况2
1.在根目录下创建vue.config.js文件
在该文件下,写入如下代码(每次修改配置文件之后要重启)
module.exports = {
publicPath: './',
devServer: {
port: 8080,
open: true,
// 反向代理配置
proxy: {
'/api': {
target: 'http://xxxxx.com/',// 代理的目标服务器地址
changeOrigin: true,//是否改变源(必填)
}
}
}
}
效果
http请求本来是axios.get('http://xxxxx.com/api/banner')
现在就可以写成axios.get('/api/banner') 实现跨域