- 什么是axios
易用、简洁且高效的http库 - 为什么使用axios
因为vue-resource在vue2之后就不在维护了,vue官方推荐我们使用axios。 - 如何使用vue-axios框架
官网
- 安装
npm i --save axios vue-axios
- 引入vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
跨域调用
- 什么是跨域调用?
跨域是指从一个域名的网页去请求另一个域名的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。 - 为什么会存在跨域调用
如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。 - 跨域调用的形式是什么样的
会先发送一次嗅探请求,如果服务器允许访问了,才会发送真实的请求 - 怎么解决跨域问题
- 配置代理
官方文档
在webpack.config.js中配置devServer属性
devServer: {
proxy: {
'/api': {
target: 'http://39.97.33.178',
changeOrgin: true
}
}
},
当我们后台接口格式不统一的时候,我们可以手动增加一个前缀,在真正请求的时候,通过pathRewrite属性,把这个前缀去掉。
devServer: {
proxy: {
'/myApi': {
target: 'http://39.97.33.178',
changeOrgin: true,
pathRewrite: {'^/myApi' : ''}
}
}
},
- 服务端支持跨域调用
怎么样才算服务器允许访问呢?服务器的相应头中包含
Access-Control-Allow-Origin : *
Access-Control-Allow-Credentials: “true” // 允许客户端携带验证信息
Access-Control-Allow-Methods: “GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH”
Access-Control-Allow-Headers: “Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie”
Access-Control-Max-Age: “3628800” - 通过jsonp解决
js脚本
封装http模块
app.js,方便进行统一的维护,可以添加一些拦截器
import axios from 'axios'
const instance = axios.create({
timeout: 1000,
headers: {
"Miaomiao-Token": 'token'
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什
// 错误处理
const data = response.data;
//不同系统修改内容不同 自行更改 看接口文档
if (data.status !== 0) {
alert(data.msg);
}
// 精简了返回内容
return data;
}, function (error) {
// 对响应错误做点什么
// 对错误信息进行提示
return Promise.reject(error);
});
function get(url, config) {
return instance.get(url, config);
}
function post(url, body, config) {
return instance.post(url, body, config);
}
export default {
get,
post
}