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

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

vue.config.js中配置

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

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

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,本地服務器檢測到‘/api’字段，發現這個請求需要代理，所以他重寫的接口名，去掉了‘/api’字段，并向目標服務器target發送了請求http://192.168.0.1/aaa/bbb/ccc/ddd，目標服務器將接口返回給代理服務器，代理服務器再將數據返回給前端