vue.config.js的proxy为什么不起作用
问题:本地开发,调用后端的接口,一调用就报CORS error跨域
第一种写法:后端网关没有做跨域处理,但是这种方法如果用到多个服务时,会导致需要配置多个代理
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的配置并没有起任何作用
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修改时,需要重启服务修改才能起作用
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_APIexport 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 })}
作者:小呆糊总
链接:https://www.jianshu.com/p/16f57e053df7