axios作用小结

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. 可以取消重复请求