如何让AngularJS 1.5在Cookie路径为/forum-rest时添加X-XSRF-TOKEN头

核心问题分析 #

AngularJS默认仅自动读取**路径为"/"**的XSRF-TOKEN Cookie，并自动为请求添加X-XSRF-TOKEN头。当Cookie路径设为"/forum-rest"时，只有当前端页面的URL路径属于"/forum-rest"子路径时，浏览器才允许页面读取该Cookie；若前端页面部署在其他路径（比如根路径"/"），则无法直接访问此Cookie，手动读取也会失败。

可行解决方法 #

方法1：调整前端页面部署路径 #

将前端静态资源部署到/forum-rest路径下（比如后端把前端文件放在/forum-rest对应的静态资源目录）。此时页面与Cookie同属一个路径范围，AngularJS会自动读取Cookie并携带X-XSRF-TOKEN头，无需额外配置。

方法2：自定义AngularJS的XSRF拦截器 #

通过后端接口获取Token后手动管理，再配置拦截器添加请求头：

1. 后端新增接口（如/forum-rest/get-csrf-token），返回当前CSRF Token值：

@GetMapping("/forum-rest/get-csrf-token")
@ResponseBody
public Map<String, String> getCsrfToken(HttpServletRequest request) {
    CsrfToken token = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
    Map<String, String> result = new HashMap<>();
    result.put("token", token.getToken());
    return result;
}

2. 前端初始化时调用该接口，将Token存入全局变量或本地存储，再配置$http拦截器为目标请求添加头：

angular.module('yourApp', [])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(['$rootScope', function($rootScope) {
      return {
        request: function(config) {
          // 仅对/forum-rest开头的请求添加CSRF头
          if (config.url.startsWith('/forum-rest')) {
            config.headers['X-XSRF-TOKEN'] = $rootScope.csrfToken;
          }
          return config;
        }
      };
    }]);
  }])
  .run(['$http', '$rootScope', function($http, $rootScope) {
    // 初始化获取CSRF Token
    $http.get('/forum-rest/get-csrf-token')
      .then(function(response) {
        $rootScope.csrfToken = response.data.token;
      });
  }]);

方法3：改用请求参数传递CSRF Token #

若业务允许，可通过请求参数传递Token（Spring Security默认支持从_csrf参数读取）：
前端发起请求时，将Token放入请求体或URL参数中：

$http.post('/forum-rest/api/post', {
  content: '示例内容',
  _csrf: $rootScope.csrfToken
});

注：此方式安全性略低于Header传递，建议优先选用前两种方法。

内容的提问来源于stack exchange，提问作者Joe D