每次遇到跨域問題都要到網(wǎng)上查一查，每次搜索到的資料都不通，今天我把對我有用的資料整理在一起，做個筆記，方便之后查閱

前端代理是為了解決前端跨域問題，但是服務(wù)器與服務(wù)器之間不存在跨域問題，所以前端代理的原理就是通過前端本地服務(wù)器向目標(biāo)服務(wù)器發(fā)送請求，目標(biāo)服務(wù)器返回數(shù)據(jù)給本地服務(wù)器，本地服務(wù)器再把數(shù)據(jù)返回給前端

vue.config.js中配置

module.exports = {
  devServer: {
    proxy: {
      '/api':{
        target:'http://192.168.0.1', //目標(biāo)地址，實際請求的服務(wù)器地址，代理服務(wù)器會向該服務(wù)器發(fā)送請求
        changeOrigin: true,
        secure: false, // target默認(rèn)不接受運行在https上且使用了無效證書的后端服務(wù)器，如果想接受，設(shè)置為false
        pathRewrite:{
          '^/api':'' //接口重寫，將接口中的‘/api’字符串去掉
        }
      }
    }
  }
}

上邊的‘/api’實際上是你給接口統(tǒng)一配置的前綴名，代理服務(wù)器看到這個字段就認(rèn)為是需要代理的接口，他就會重寫接口名，并向target發(fā)送請求
例如：

getDolist(params) {
    const url = 'api/aaa/bbb/ccc/ddd'
    return http.get(url, params)
}

接口需要請求的是http://192.168.0.1/aaa/bbb/ccc/ddd,但是實際上瀏覽器顯示的請求地址是http://localhost:8080/api/aaa/bbb/ccc/ddd,本地服務(wù)器檢測到‘/api’字段，發(fā)現(xiàn)這個請求需要代理，所以他重寫的接口名，去掉了‘/api’字段，并向目標(biāo)服務(wù)器target發(fā)送了請求http://192.168.0.1/aaa/bbb/ccc/ddd，目標(biāo)服務(wù)器將接口返回給代理服務(wù)器，代理服務(wù)器再將數(shù)據(jù)返回給前端