axios是xhr的封装,支持promise操作的请求库,并且提供了一系列方便的api接口。
1. 请求和返回的拦截
可以在请求头添加统一添加token做鉴权
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
config.headers.token = 'added by interceptor';
return config;
});
// 添加响应拦截器
axios.interceptors.response.use(function (data) {
data.data = data.data + ' - modified by interceptor';
return data;
});
2. 适配浏览器和node
var defaults = {
adapter: getDefaultAdapter(),
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
//...
}
function getDefaultAdapter() {
var adapter
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr')
} else if (
typeof process !== 'undefined' &&
Object.prototype.toString.call(process) === '[object process]'
) {
// For node use HTTP adapter
adapter = require('./adapters/http')
}
return adapter
}
3. 防止csrf
我们知道可以设置cookie字段same-site(token放cookie里并设置same-site)或者请求字段referer来一定程度防止csrf。
也可以使用双重cookie的方法:cookie和请求头都加token。
而第三方网站(钓鱼网站)没法通过js获取cookie中的token,也就没法加入请求头。
后端通过判断cookie和请求头的token是否都存在并且相同即可。
axios就是利用双重cookie的原理来防止csrf的。
**总结:**
axios的特点有:
1. 支持promise
2. 可以拦截请求和响应
3. 适配浏览器和node
4. 防止csrf
5. 可以取消重复请求