vue.config.js的proxy为什么不起作用
问题:本地开发,调用后端的接口,一调用就报CORS error跨域
第一种写法:后端网关没有做跨域处理,但是这种方法如果用到多个服务时,会导致需要配置多个代理
![](http://upload-images.jianshu.io/upload_images/5418302-857156543fc3aa1c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
image.png
env文件
VUE_APP_WEB_API=http://192.168.200.176:5080/verify
vue.config.js文件
devServer: {
proxy: { // 配置本地代理
'/api': {
target: 'http://192.168.200.176:5080/verify',
secure: false,
changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
// ws: true, // 是否启用websockets
/*
pathRewrite意味着当我们请求本地http://localhost:8080/api/uploadAndValid
地址时,实际访问的是
http://192.168.200.176:5080/verify/uploadAndValid
注意:必须把env文件的VUE_APP_WEB_API=http://localhost:8080/api改为本地的
*/
pathRewrite: {
'^/api': ''
}
}
}
},
上传页面-调用接口http://192.168.200.176:5080/verify/uploadAndValid
<template> <div class="signFileUploadCotain"> <Upload ref="upload" type="drag" :action="`${baseUrl}/uploadAndValid`"> <p style="font-weight:bold;">点击上传或拖拽文件到这里</p> </Upload> </div> </template>
<script>
//baseUrl = http://192.168.200.176:5080/verify
const baseUrl = process.env.VUE_APP_WEB_API
</script>
但是请求的url并没有任何变化,说明proxy的配置并没有起任何作用
![](http://upload-images.jianshu.io/upload_images/5418302-68d6aa555ea0f29e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
image.png
原因:
proxy的配置pathRewrite是针对本地的服务,所以env的配置文件要是http://localhost:8080/api,这样所有的请求接口都带有/api,并在遇到/api时自动代理到proxy设置的target,
修改后
env
VUE_APP_WEB_API=http://localhost:8080/api
vue.config.js
devServer: {
proxy: { // 配置本地代理
'/api': {
target: 'http://192.168.200.176:5080/verify',
secure: false,
changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
// ws: true, // 是否启用websockets
/*
pathRewrite意味着当我们请求本地http://localhost:8080/api/uploadAndValid地址时,
实际访问的是http://192.168.200.176:5080/verify/uploadAndValid
注意:必须把env文件的VUE_APP_WEB_API=http://localhost:8080/api改为本地的
*/
pathRewrite: {
'^/api': ''
}
}
}
},
修改后接口请求成功,不再跨域
注意:访问http://localhost:8080/api/uploadAndValid实际是访问http://192.168.200.176:5080/verify/uploadAndValid
注意:env文件和vue.config.js修改时,需要重启服务修改才能起作用
![](http://upload-images.jianshu.io/upload_images/5418302-5a09a16ed67f9537.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
image.png
方法二:后端网关做了跨域处理
2-1env的服务地址不做配置,这样系统会自动识别本地的服务,部署到线上时,也会自动获取
VUE_APP_WEB_API=
2-2vue.config.js文件
proxy: { // 配置本地代理
'/aio': {
target: 'http://192.168.200.176:5080',
secure: false,
changeOrigin: true // 开启代理,在本地创建一个虚拟服务端
/*
pathRewrite意味着当我们请求本地http://localhost:8081/aio/verify/uploadAndValid地址时,
实际访问的是http://192.168.200.176:5080/aio/verify/uploadAndValid
注意:必须把env文件的VUE_APP_WEB_API= 不赋值,这样部署后才会直接用线上地址,本地也会自动取
本地地址
*/
// pathRewrite: {
// '^/aio': '/aio'
// }
}
}
2-3.接口文件
const baseUrl = process.env.VUE_APP_WEB_API
export async function getTypeList (params) {
return axios.request({
url: `${baseUrl}/aio/verify/typeList`,
method: 'post',
data: params
})
}
注意:如果将/aio/verify设置成某一个变量,再像${baseUrl}这样使用时,
会导致代理无用,将会变成(failed)net::ERR_NAME_NOT_RESOLVED
请求地址为:http://aio/verify/typeList
const opapi = '/aio/verify'
export async function getTypeList (params) {
return axios.request({
url: `${baseUrl}/${opapi}/typeList`,
method: 'post',
data: params
})
}
![](http://upload-images.jianshu.io/upload_images/5418302-2d1176485c443cd0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
image.png