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

Question

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

Answer 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 中，并且可以注入到您的组件中。

Answer 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;
};