工具方法

整理Axios比较重要的工具方法。

防止CSRF

Axios是如何防止CSRF攻击的呢？

// lib/defaults.js
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
  
// lib/adapters/xhr.js
const xsrfValue = cookies.read(config.xsrfCookieName);
requestHeaders[config.xsrfHeaderName] = xsrfValue;

CSRF特点之一即是，冒用用户的身份但无法获取用户cookie的实际信息。

因此，在cookie设置xsrfCookieName信息(由后端提供)，每次请求时，将此信息放入header头xsrfHeaderName中。

后端接受请求时，验证header中xsrfHeaderName信息是否正确即可防范CSRF攻击。

URL相对/绝对地址

Axios有一个功能是，可以分析用户传入地址是相对地址还是绝对地址。

• 相对地址时，完整请求地址为基础地址+请求地址
• 绝对地址时，完整请求地址为请求地址

// lib/core/buildFullPath.js
var isAbsoluteURL = require('../helpers/isAbsoluteURL');
var combineURLs = require('../helpers/combineURLs');

module.exports = function buildFullPath(baseURL, requestedURL) {
  // 当存在baseURL基础地址时，判断传入地址是否为相对地址
  if (baseURL && !isAbsoluteURL(requestedURL)) {
    return combineURLs(baseURL, requestedURL);
  }
  // 否则，识别为绝对地址，忽略基础地址
  return requestedURL;
};

识别绝对地址的条件是：

• 以<scheme>://开头的URL地址
• 以//开头的URL地址

// lib/helpers/isAbsoluteURL.js
module.exports = function isAbsoluteURL(url) {
  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
};

最后组合URL的逻辑也比较简单：

// lib/helpers/combineURLs.js
module.exports = function combineURLs(baseURL, relativeURL) {
  // 判断是否传入第二个参数，即相对请求路径
  return relativeURL
    // 将基础地址的尾部/取消，将相对地址的头部/取消，中间添加/组合
    // 增强适配性
    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
    : baseURL;
};

这个功能还是非常实用的，而且实现简单，值得学习。

校验HTTP请求返回状态

Axios可以校验请求状态是否正常。

// lib/defaults.js
validateStatus: function validateStatus(status) {
  return status >= 200 && status < 300;
}

// lib/core/settle.js
module.exports = function settle(resolve, reject, response) {
  var validateStatus = response.config.validateStatus;
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    resolve(response);
  } else {
    reject(createError(
      'Request failed with status code ' + response.status,
      response.config,
      null,
      response.request,
      response
    ));
  }
};

其实很简单，判断XHR status值是否在200到300之间。