vue-cli配置反向代理解决跨域及过程理解
vue-cli提供了配置反向代理的接口,即设置config/index.js中的proxyTable。配置如下:dev: {......proxyTable: {'/api':{//将www.exaple.com印射为/apistarget:'https://www.exaple.com',//跨域地址change...
vue-cli配置反向代理
vue-cli提供了配置反向代理的接口,即设置config/index.js
中的proxyTable
。配置如下:
dev: {
......
proxyTable: {
'/api':{ //将www.exaple.com印射为/apis
target:'https://www.exaple.com', //跨域地址
changeOrigin:true, //是否跨域
secure:false, //是否使用https
pathRewrite: {
'^/api': '/api' //匹配以/api为开头的请求地址,并使用/api替换
}
}
}
}
在组件中调用接口示例(axios):
import axios from 'axios'
axios({
method:'post',
url:'/api/login',
data:{
username:'qwe',
password:123456
}
}).then();
上述示例请求的地址会被解析为https://www.exaple.com/api/login
。如果proxyTable
中pathRewrite
配置为空,则请求的地址被解析为https://www.exaple.com/login
。
以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js
和config/prod.env.js
里也就是开发/生产环境下分别配置一下请求的地址API_HOST
,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址。配置代码如下:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"', //开发环境
API_HOST:"/api/"
})
module.exports = {
NODE_ENV: '"production"', //生产环境
API_HOST:'"http://40.00.100.100:3002/"'
}
对反向代理解决跨域过程的理解
如图,浏览器中请求的url
为http://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
我实际请求的url
为http://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
本地项目通过http://localhost:8081/#/
在浏览器中进行访问。
通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url
,这样就绕过直接请求真正的url
导致跨域问题。
更多推荐
所有评论(0)