現在公司基本都是前后端分離為主，使用 Vue 搭建的項目在本地與調用后端提供的 api 時，因為是使用 node 運行服務器，IP與后端不一致，所以會產生跨域問題。耳熟能詳的跨域手段一般是JSONP，CORS什么的，而 Vue 已經幫我們配置好了，只需在 vue.config.js 設置一下就行了
注：vue-cli 版本是2.0左右的會有 webpack 的 config 目錄，
而 vue-cli 版本是3.0左右的則沒有 config 目錄，取而代之的是 vue.config.js

Vue 跨域原理：
瀏覽器是禁止跨域的，但是服務端不禁止，在本地運行 yarn serve 等命令時實際上是用 node 運行了一個服務器，因此 proxy 實際上是瀏覽器將請求發給自己的服務端，再由自己的服務端轉發給要跨域的服務端，做了一層代理，因為不會出現跨域問題。
（ vue-cli的proxyTable用的是http-proxy-middleware中間件
create-react-app用的是webpack-dev-server內部也是用的http-proxy-middleware
http-proxy-middleware內部用的http-proxy）

vue.config.js的配置：

module.exports = {
  devServer: {
    open: true,
    host: "localhost",
    port: 8080,
    https: false,
    //以上的ip和端口是我們本機的;下面為需要跨域的
    proxy: {
      //配置跨域
      "/api": {
        target: "https://p.3.cn/prices/mgets?skuIds=J_100008348542&type=1", //這里應該填寫你們真實的后臺接口
        ws: true,
        changOrigin: true, //允許跨域
        pathRewrite: {
          "^/api": "", //請求的時候使用這個api就可以
        },
      },
    },
  },
};

在組件里用 axios 發起請求：

    sendCOReq() {
      this.$axios.get("/api").then(res => {
        console.log(res);
      });
    }

獲取到的數據

6.16更新
vue.config.js 里的 pathRewrite作用是什么？
用代理得有一個標識，告訴node你這個請求要用代理。 不然, 你的 html, css, js這些靜態資源請求都會走代理，這顯然是不對的。

proxy: {
      //配置跨域
      "/useclient": {
        target: "https://p.3.cn/prices/mgets", //這里后臺的地址模擬的;應該填寫你們真實的后臺接口
        ws: true,
        changOrigin: true, //允許跨域
        pathRewrite: {
          "^/useclient": "", //請求的時候使用這個useclient就可以
        },
      },
      "/useclient2": {
        target: "https://p.3.cn/prices/mgets", //這里后臺的地址模擬的;應該填寫你們真實的后臺接口
        ws: true,
        changOrigin: true, //允許跨域
        pathRewrite: {
          "^/useclient2": "", //請求的時候使用這個useclient2就可以
        },
      },
    },

    sendCOReq() {
      this.$axios.get("/useclient?skuIds=J_100008348542&type=1").then(res => {
        console.log(res);
      });
    }

"/useclient"：
這個就是上文所說的標識，接口只要是'/useclient'開頭的才用代理，所以你的接口就要這么寫 /useclient/xx/xx。 最后代理的請求路徑就是 http://xxx.xx.com/useclient/xx/xx
pathRewrite: {"^/useclient": "", }
然而正確的接口路徑里面是沒有/useclient的，所以就用到 pathRewrite,用''^/useclient'':'', 把最終請求路徑中'/useclient'去掉，這樣既能有正確標識，又能在請求接口的時候去掉

這個標識還可以復數配置（比如我配置多了一個/useclient2）

參考：云端的幻影 vue跨域實現與原理（proxyTable）
小白開發MOOC Vue開發--vue3.0 vue.config.js 配置跨域
sf node中跨域代理 proxyTable的原理是什么？