axios是基于promise(诺言)用于浏览器和node.js,是http客户端。
axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
特点:支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器支持防止CSRF(跨站请求伪造)
vue中使用axios
运行 npm install axios 安装axios
在vue中引入axios
import axios from 'axios';
Vue.prototype.$http = axios
调用接口获取数据
fetchUsers (id) { this.$http.get('https://api.myjson.com/bins/l66xq') .then((response) => { // console.log(response); this.customer = response.data }) }
如何请求的数据不在同一资源路径下就会报错,Failed to load http://222.16.46.131:8080/Skyworth/changePictureAdmin: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
此时则需要解决跨域问题
proxy: { // 配置跨域
'/api': {
target: 'http://localhost:8088',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
配置了跨域后再修改接口为代理后的接口即可