你要请求的线上域名
http://baidu.com
你要请求的线上接口
/news/list
拼接起来就是这样的
http://baidu.com/news/list
然后vue.config.js配置是这样的:
module.exports = {
devServer: {
proxy: {
'/api': { //这里的/api表示的意思是以/api开头的才生效 ->刷下面的重点
target: "http://baidu.com",
changOrigin: true, //如果接口跨域这里就要这个参数配置
pathRewrite: {
//'^/api': '/api' //实际请求地址是http://baidu.com/api/news/list
'^/api': '/' //实际请求地址是http://baidu.com/news/list
// 我的理解就是http://baidu.com替换了/api/news/list里面的/api
}
}
}
升级版:打印proxy代理地址:vue.config.js
devServer: {
proxy:{
'/dev':{
target: "https://baidu.com",
changeOrigin: true,
secure:false,
onProxyReq: function(proxyReq, req, res) {
const realUrl = proxyReq.protocol + '//' + proxyReq.host + proxyReq.path
console.log('Proxying real request url: ' + realUrl);
}
}
},
port: 8443,
open: false,
disableHostCheck: true,
}