問(wèn)題：本地開(kāi)發(fā)，調(diào)用后端的接口，一調(diào)用就報(bào)CORS error跨域

第一種寫法：后端網(wǎng)關(guān)沒(méi)有做跨域處理，但是這種方法如果用到多個(gè)服務(wù)時(shí)，會(huì)導(dǎo)致需要配置多個(gè)代理

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, // 開(kāi)啟代理，在本地創(chuàng)建一個(gè)虛擬服務(wù)端
        // ws: true, // 是否啟用websockets
        /*
        pathRewrite意味著當(dāng)我們請(qǐng)求本地http://localhost:8080/api/uploadAndValid
        地址時(shí)，實(shí)際訪問(wèn)的是
        http://192.168.200.176:5080/verify/uploadAndValid
        注意：必須把env文件的VUE_APP_WEB_API=http://localhost:8080/api改為本地的
        */
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

上傳頁(yè)面-調(diào)用接口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;">點(diǎn)擊上傳或拖拽文件到這里</p>
    </Upload>
  </div>
</template>

<script>
//baseUrl  = http://192.168.200.176:5080/verify
const baseUrl = process.env.VUE_APP_WEB_API
</script>

但是請(qǐng)求的url并沒(méi)有任何變化,說(shuō)明proxy的配置并沒(méi)有起任何作用

image.png

原因：
proxy的配置pathRewrite是針對(duì)本地的服務(wù)，所以env的配置文件要是http://localhost:8080/api,這樣所有的請(qǐng)求接口都帶有/api，并在遇到/api時(shí)自動(dòng)代理到proxy設(shè)置的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, // 開(kāi)啟代理，在本地創(chuàng)建一個(gè)虛擬服務(wù)端
        // ws: true, // 是否啟用websockets
        /*
        pathRewrite意味著當(dāng)我們請(qǐng)求本地http://localhost:8080/api/uploadAndValid地址時(shí)，
        實(shí)際訪問(wèn)的是http://192.168.200.176:5080/verify/uploadAndValid
        注意：必須把env文件的VUE_APP_WEB_API=http://localhost:8080/api改為本地的
        */
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

修改后接口請(qǐng)求成功，不再跨域

注意：訪問(wèn)http://localhost:8080/api/uploadAndValid實(shí)際是訪問(wèn)http://192.168.200.176:5080/verify/uploadAndValid

注意：env文件和vue.config.js修改時(shí)，需要重啟服務(wù)修改才能起作用

image.png

方法二：后端網(wǎng)關(guān)做了跨域處理

2-1env的服務(wù)地址不做配置，這樣系統(tǒng)會(huì)自動(dòng)識(shí)別本地的服務(wù)，部署到線上時(shí)，也會(huì)自動(dòng)獲取

VUE_APP_WEB_API=

2-2vue.config.js文件

    proxy: { // 配置本地代理
      '/aio': {
        target: 'http://192.168.200.176:5080',
        secure: false,
        changeOrigin: true // 開(kāi)啟代理，在本地創(chuàng)建一個(gè)虛擬服務(wù)端
        /*
        pathRewrite意味著當(dāng)我們請(qǐng)求本地http://localhost:8081/aio/verify/uploadAndValid地址時(shí)，
        實(shí)際訪問(wèn)的是http://192.168.200.176:5080/aio/verify/uploadAndValid
        注意：必須把env文件的VUE_APP_WEB_API=  不賦值，這樣部署后才會(huì)直接用線上地址，本地也會(huì)自動(dòng)取
        本地地址
        */
        // 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設(shè)置成某一個(gè)變量，再像${baseUrl}這樣使用時(shí)，

會(huì)導(dǎo)致代理無(wú)用，將會(huì)變成(failed)net::ERR_NAME_NOT_RESOLVED
請(qǐng)求地址為：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