Jhipster 4 angular 4 ng2-file-upload return error 403 access 由于 CSRF 而被禁止答案

【问题标题】：Jhipster 4 angular 4 ng2-file-upload return error 403 access forbidden becauze of CSRFJhipster 4 angular 4 ng2-file-upload return error 403 access 由于 CSRF 而被禁止
【发布时间】：2017-09-18 18:16:41
【问题描述】：

ng2-file-upload 不会在上传请求的同时发送 CSRF 访问令牌，所以我得到 403 访问被禁止并且我的上传请求立即被拒绝。

【问题讨论】：

标签： angular spring-boot csrf jhipster x-xsrf-token

【解决方案1】：

在 jhipster angular 4 中，每个正常的 http 请求在标头中都有一个 X-XSRF-TOKEN，但我认为第三方库 ng2-file-upload 在内部不使用 http 服务。因此，当您在组件的构造函数中创建 FileUploader 对象时，您应该像这样实例化它：

this.uploader = new FileUploader({url: URL, headers: [{name: 'X-XSRF-TOKEN', value: csrfService.getCSRF()}]});

其中 csrfService 是 SCSRFService 的一个实例，它位于您的项目 SharedServices 中，并且可以注入到您的组件中。

【讨论】：

【解决方案2】：

如果您的令牌更频繁地更改，您也可以根据请求设置它。在下面的示例中，CSRF 令牌取自 cookie。这可以在您的组件构造函数中完成。

this.uploader = new FileUploader({ url: URL });
this.uploader.onBeforeUploadItem = (fileItem) => {
    fileItem.headers.push({name: 'X-XSRF-TOKEN', value: cookieService.getCookie('XSRF-TOKEN')});
    return fileItem;
};

【讨论】：