vue-cli3用axios+proxy简单解决在dev开发环境下的跨域问题

淘宝
http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp
苏宁
http://quan.suning.com/getSysTime.do
京东
https://a.jd.com//ajax/queryServerData.html

这几个都是各大平台的服务器时间接口。

一开始想着获取接口时间就直接axios.get就完事了

axios.get("http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp")
    .then(res => {
    　　console.log(res);
　　})
　　.catch(err => {
　　　　console.log(err);
　　});    

谁知道无脑报错

 意思就是说没有请求头。

请求头是什么呢，在这我自己的理解是：

假设后端是屋子，api接口是大门，你是来访者，而请求头则是钥匙。

缺少请求头就是没有钥匙，开不了门进不去，而解决办法就是要么你配一把钥匙，要么后端设置不上锁（允许全部访问）。

而现在我改不了后端，那就只能自己去配一把钥匙了（整个请求头回来）

在这说一下，vuecli3和webpack配置是不一样的。所以挂代理的地方也是不一样

首先下载axios在开发环境下

npm install axios --save-dev

安装完成后在package.json会看到

vuecli3则是在根目录下创建vue.config.js文件

在里面复制粘贴，这是在dev开发环境下使用的proxy代理

module.exports = {
  devServer: {
    proxy: {
　　　　//"/taobao"是你打算用的api接口名
      "/taobao": {
        target: "http://api.m.taobao.com", // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        ws: true, //代理websockets
        pathRewrite: {
          // 路径重写，
          "^/taobao": "" // 替换target中的请求地址，也就是说以后你在请求http://api.taobao.com/xxx这个地址的时候直接写成/taobao/xxx即可。
        }
      }
    }
  }
};

打开main.js添加（这里我就直接全局设置了，以后可以整到指定的地方）

//导入 axios
import Axios from "axios";

//在vue的原型中加个$axios方法，到时候就直接用
Vue.prototype.$axios = Axios;

然后就可以在你的.vue页面用axios了

我这就打开app.vue

 methods: {
    getTbTime() {
      this.$axios
        //等同于.get(/taobao/rest/api3.do?api=mtop.common.getTimestamp)
        .get("/taobao/rest/api3.do", {
          params: {
            api: "mtop.common.getTimestamp"
          }
        })
        .then(res => {
          console.log(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    }
}

这样就能正确获取接口问题了。

原理呢应该就是本地可以传给proxy代理服务器信息。

而服务器之间可以自由传递信息。所以就需要挂代理来传东西了。

 但是这只是dev开发环境下使用。到build生产环境下就不可以这样使用了。