proxy代理的使用（解決跨域，配置多個代理）
一、什么是代理
字面意思就是類似中間商，開啟代理，原理就是在本地創建一個虛擬服務器，發送請求數據，同時接受請求的數據，

利用服務器與服務器間，交互，不會有跨域問題，也是完全只靠前端自己獨立解決跨域的方式

以vue cli3示例
我現在需要在本地請求接口

?首先，在根目錄下創建 vue 的配置文件 vue.config.js(必須叫這個名字)

//  cli3     vue.config.js
  devServer: {
    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否啟用websockets
          changeOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求							的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
          pathRewrite: {  //重寫匹配的字段，如果不需要在請求路徑上，重寫為""
              "^/api": "/api"
          }
      },
   
  },
  }




  //cli2的放在config文件夾中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否啟用websockets
          changeOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求							的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
          pathRewrite: {  //重寫請求路徑上匹配到的字段，如果不需要在請求路徑上，重寫為""
              "^/api": "/api"，
              "demo.json": "index.json"
          }
      },
  },
  }

在創建axios的時候，beseURL這樣配置

const ajax = axios.create({
    baseURL:"/api",
    timeout: 6000,//請求超時時間
})

創建的請求

export function getData() { //get
  return request({
    url: '/search/home',
    method: 'GET'
  })
}

這樣匹配到這個字段時就會代理到target去，將target添加到/前面，在根據pathRewrite,然后是你請求的ajax
意思大概就是，你的beseURL加上你請求的url滿足proxy的匹配，那你的代理就是沒問題的
同時處理的也是匹配到的部分。

這樣虛擬服務器請求的的就是

http://www.xiongmaoyouxuan.com/api/search/home

再看你本地請求的地址，是不是這個樣子

配置多個代理

只需讓你本地請求，滿足代理的規則即可

    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", 
          // ws: true, 
          changeOrigin: true
          pathRewrite: {
              "^/api": "/api"
          }
      },
      "/user": {
          target: "http://www.xiongmaoyouxuan.com",
          // ws: true, 
          changeOrigin: true
          pathRewrite: {
              "^/user": "/api"
          }
      },
   
  }, 

創建axios的時候，beseURL配置:

const ajax = axios.create({
    baseURL:"/",
    timeout: 6000,//請求超時時間
})

創建的請求：

export function getData() { //get
  return request({
    url: 'api/search/home',
    method: 'GET'
  })
}
export function getData1() { //get
  return request({
    url: 'user/search/home',
    method: 'GET'
  })
}

這兩個接口，通過代理請求的是同一個接口。這樣看是否更好的理解了代理。