vue项目开发之proxyTable 解决开发环境的跨域
在实际项目开发过程中vue cli自带的服务器,但是我们实际要去请求我们的数据接口,服务器与服务器之间产生了一个代理跨域问题,我们需要修改自带服务的配置。在config 中的index文件中,有一个proxyTable参数参数修改如下:proxyTable: { '/list': { target: 'http://rap.didoxy.com/mock
·
在实际项目开发过程中vue cli自带的服务器,但是我们实际要去请求我们的数据接口,服务器与服务器之间产生了一个代理跨域问题,我们需要修改自带服务的配置。在config 中的index文件中,有一个proxyTable参数
参数修改如下:
proxyTable: {
'/list': {
target: 'http://xxx.xxx.com/xxx/6',
pathRewrite: {
'^/list': '/'
}
}
},
如果需要跨域那么需要加上参数changeOrigin:true
proxyTable: {
'/list': {
target: 'http://xxx.xxx.com/xxx/6',
changeOrigin:true,
pathRewrite: {
'^/list': '/'
}
}
},
请求过程就需要这样写
//账号登陆提交
submitForm:function (formName) { var info={ user_phone: this.info.username, user_pwd: this.info.password, verify_code: this.info.password } var that=this; this.$http.post('/list/login',info).then(function (res) { console.log(res.data) if(res.data.code==2000){ this.$router.push({ path: 'OrderTracking'}) }else (res.data.code==4000){ alert("登陆失败") }
}) }
项目上线时后台配置
#商家管理员端 server { listen 80; server_name xxxx.xxxx.xxxx.com; #社区端 location /list/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Nginx-Proxy true; proxy_set_header Connection ""; proxy_pass https://api.xxxx.xxx.com/seller/; } location /ui/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Nginx-Proxy true; proxy_set_header Connection ""; proxy_pass https://api.xxxx.xxx.com/public/; } location / { root /www/xxx/xxx; index index.html index.htm; } }
更多推荐
已为社区贡献1条内容
所有评论(0)