vue2.0集成axios同时解决跨域问题

第一步、使用vue创建工程目录

使用打开cmd到自己的目录下使用 vue init webpack dem01（demo01是工程名称）。

配置如下：

 第二步、配置axios设置

使用WebStorm打开项目，在Terminal中使用cnpm install 引入依赖。

在Terminal中使用cnpm install axios --save引入axios包。

输入方法。

send(){
      console.log("send被调用了")
      axios.get("/api/demo/").then(res=>{
        console.log(res.data);
      })
    }
  }

第三步解决跨域问题

注意，注意，注意，这里是vue2.0解决跨域问题的方法，同时使用vue init webpack dem01创建项目。

修改/config/index.js中

 在proxyTable属性中加入如下配置。

'/api': {
        target : 'http://127.0.0.1:8081',    //设置你调用的接口域名和端口号.别忘了加http
        changeOrigin : true,   //允许跨域
        pathRewrite : {
          '^/api': ''
          // '/'这里理解成用‘/api’代替target里面的地址

        }
      }

例如上面send方法就是访问的 http://localhost:8081/demo/。

重要注意"^/api"会将get方法的url 中"/api/demo/"替换为 ==>  ""+"/demo/"。所以千万不要写成 '^/api': '/'，因为会被替换为  "//demo/"，前面会出现两个//