Vue + axios 小坑随笔（跨域部分）

今天闲暇时刻撸项目的时候撸出了一个小坑，虽然很快解决了但是还是想着记录下来，防止以后再掉进去。（说不定明天就又跳进去了2333）

在进入正文之前先小小的偏一下题，聊一下axios —— 首先 axios并不支持 vue.use() 的声明方式使用，一般的声明使用方式应该如下：

main.js

import axios from 'axios';
Vue.prototyps.$axios=axios;

这样子的话在其他的 vue 组件中就可以通过 this.$axios 来调用使用了。

好了，说回正题。这里要说的坑呢就是跨域的问题了。这个问题是在我要调用 api 接口的时候出现的。一开始的时候忽略了这个方面，所以浏览器毫不留情的给了我如下的提示：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
看到这个错误提示我懵逼了一下，然后恍然大悟 —— 他喵的原来是我忘记设置跨域了…惭愧惭愧。然后花了一点时间配置了一下，然后重启运行，嗯，完美~

咳咳，其实设置跨域也并不复杂，只需要在 webpack 配置一下 proxyTable 就 ok 了。配置文件为 config/index.js，大致代码如下：

加入以下 proxyTable: { 
        '/api': { 
        target: 'http://api.zhuishushenqi.com/',//这个是我调用的api，设置你调用的接口域名和端口号，别忘了加http 
        changeOrigin: true, 
        pathRewrite: { 
        '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://api.zhuishushenqi.com/user/add'，直接写‘/api/user/add’即可 
        } 
    } 
},

不过这里只是解决了开发环境中的跨域问题，生产环境中真正部署到服务器上如果是非同源的话还是会存在跨域问题的。但是目前因为还没有做到那一步，所以这个问题暂且不去理会。希望上面啰啰嗦嗦的一堆话能对需要帮助的人起到一定的帮助作用。

Done~