在Vue中如何使用axios跨域访问数据

 

最近在项目中需要用到axios，所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品，官网也说了，以后都用axios，

vue-resource不在维护。那么这个axios怎么用呢，上网搜索了一大堆，基本上都是雷同，我也不知道那些作者有没有在本地测试过。至少我按照网上的做法，总不能成功。经过几天的奋斗，我终于把它搞清楚了，为了不让其他的小伙伴们走弯路，我把我在实际操作中的例子分享给大家，希望对大家有用。

一、安装axios

老规矩，要想使用axios，我们得安装它，安装方式：npm install axios

二、客户端使用方式

先来看看网上的答案，如图所示，我已经在图上标识过了，这种做法是错误的。

正确的做法是去掉post，如图所示：

 

 

 

三、axios方法封装

一般情况下，我们会用到的方法有：GET,POST,PUT,PATCH，封装方法如下：

 

 

四、封装后的方法的使用

1、在main.js文件里引用之前写好的文件，我的命名为http.js

2、在需要的地方之间调用，如图所示：

 

说明：

GET调用方法如下，其中url是接口地址

this.$get(url).then((res) {

//代码

});

POST调用方法如下，其中url是接口地址，data是请求的数据。

this.$post(url,data).then({

//代码

});

PATCH调用方法如下，其中url是接口地址，data是请求的数据

this.$patch(url,data).then({

//代码

});

PUT调用方法如下，其中url是接口地址，data是请求的数据

this.$put(url,data).then({

//代码

});

五、跨域设置

1，设置转发代理

同源策略只是在浏览器中存在，不存在于服务器中。因此我们可以将需要跨域请求的地址转发给我们自己的服务器然后委托服务器去请求信息。

在config/index.js中，设置proxyTable

proxyTable: {    //转发代理
  '/activity':{  //接口名
    target:'http://10.136.197.42:3000',    //目标地址
    changeOrigin: true  
  }
},指定默认baseURL后，使用转发代理可能会失效，请求会从baseURL地址请求数据

2，在服务器端设置cors跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。相对JSONP，CORS支持POST提交，并且实施起来灰常简单，CORS原理只需要向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

在node项目中

先安装cors模块  npm i cors

在app.js中，引入cors

var cors=require('cors');

使用cors

app.use(cors())