2020-05-22 Vue跨域请求怎么做(vue-cli 3.0)

现在公司基本都是前后端分离为主，使用 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的原理是什么？