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_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
  })
}

image.png