深入理解axios中的XSRF-TOKEN跨域处理机制

在前后端分离架构中，axios作为一款流行的HTTP客户端库，提供了XSRF（跨站请求伪造）防护机制。本文将深入探讨axios的XSRF-TOKEN处理逻辑，特别是跨子域场景下的解决方案。

axios的XSRF防护机制原理

axios内置的XSRF防护机制通过以下方式工作：

1. 从cookie中读取名为"XSRF-TOKEN"的值
2. 将该值作为"X-XSRF-TOKEN"请求头发送到服务器
3. 服务器验证令牌的有效性

默认情况下，axios只会对与当前页面同源的请求自动添加XSRF头。这是出于安全考虑，防止令牌泄露给不受信任的域。

跨子域场景的挑战

在实际开发中，常见以下场景：

• 前端部署在frontend.company.com
• API服务部署在backend.company.com
• 两者共享同一个顶级域(company.com)

此时，axios的默认机制会失效，因为它会严格比较完整域名是否匹配。虽然浏览器会自动将cookie发送到同顶级域下的子域，但axios不会自动添加XSRF头。

解决方案：请求拦截器实现

我们可以通过axios的请求拦截器来实现跨子域的XSRF防护：

const xsrfTokenRequestInterceptor = (request) => {
  try {
    const method = request.method?.toLowerCase();
    const unsafeMethods = ['post', 'put', 'delete', 'patch'];
    const methodRequiresCSRF = unsafeMethods.includes(method);

    const currentHost = window.location.hostname.split('.').slice(-2).join('.');
    const targetHost = new URL(axios.getUri(request)).hostname.split('.').slice(-2).join('.');
    const sameBaseDomain = currentHost === targetHost;

    if (request.withXSRFToken === undefined) {
      request.withXSRFToken = sameBaseDomain && methodRequiresCSRF;
    }

    if (request.withCredentials === undefined) {
      request.withCredentials = sameBaseDomain;
    }
  } catch (error) {
    console.error('XSRF拦截器处理异常:', error);
  }

  return request;
};

实现要点解析

1. 方法类型判断：只对POST、PUT、DELETE、PATCH等可能修改数据的请求启用XSRF防护
2. 域名匹配：比较当前页面和目标URL的二级域名和顶级域名是否相同
3. 配置覆盖：保留手动设置withXSRFToken和withCredentials的能力
4. 错误处理：确保拦截器异常不会阻断请求

注意事项

1. 此方案假设所有子域共享同一个顶级域
2. 对于包含国家代码的二级域名（如.co.uk），需要更复杂的域名解析逻辑
3. 必须确保服务器正确设置了cookie的domain属性为顶级域
4. 生产环境应考虑使用成熟的域名解析库处理复杂域名

通过这种拦截器方案，我们可以在保持安全性的同时，实现跨子域的XSRF防护，为前后端分离架构提供更好的开发体验。