vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://benji.com:3000',
pathRewrite: {
'^/api': ''
},
}
}
}
}
请求:
axios.get('/api/hello').then(res => {
console.log(res.data)
})
我们要请求http://benji.com:3000/hello的数据,而开发阶段的服务器允许在本机比如http://localhost:8080端口上,
如果目标地址http://benji.com:3000/hello不允许跨域,则我们就要设置代理:
以上devServer表示所有以/api开头的请求,代理到真正的服务器http://benji.com:3000,
如果像上面一样设置了pathRewrite则表示将请求中的url片段替换成目标片段。
最终请求/api/hello变为/hello再变为http://benji.com:3000/hello
在真正的执行过程中,浏览器依然是安装代码中的地址去请求本机开发的node服务器,
node再根据配置去请求真实的接口地址http://localhost:8081/api/hello
网友评论