axios的跨域使用
2018-07-04 本文已影响0人
却忘不掉你心言
使用 cnpm 安装 axios
![](https://img.haomeiwen.com/i12896857/f5ade164ca88d91f.png)
首先在 main.js 中引入 axios
![](https://img.haomeiwen.com/i12896857/f35fd0eabe112bde.png)
这时候如果在其它的组件中,是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性
Vue.prototype.$http= axios
在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令
例如
![](https://img.haomeiwen.com/i12896857/ebaea25febde6b6c.png)
配置 axios
实际上只有 url 是必须的
对于get请求
![](https://img.haomeiwen.com/i12896857/e47c31bcdd0df616.png)
对于post请求
![](https://img.haomeiwen.com/i12896857/65cb312290e59028.png)
多个请求
![](https://img.haomeiwen.com/i12896857/439ae9ba79a4744b.png)
axios可以通过配置(config)来发送请求
![](https://img.haomeiwen.com/i12896857/a1419e9794e5932a.png)
.then 和 .catch
![](https://img.haomeiwen.com/i12896857/9220a13f3ef9c4fd.png)
请求方式的别名,这里对所有已经支持的请求方式都提供了方便的别名
![](https://img.haomeiwen.com/i12896857/6f29bb88aca396d6.png)
vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,在webpack配置一下proxyTable就OK了,如下 config/index.js
![](https://img.haomeiwen.com/i12896857/6bea258bda10c57e.png)