Jhipster 4 angular 4 ng2文件上载返回错误403由于CSRF原因禁止访问

ng2文件上传不会在上传请求旁边发送CSRF访问令牌，因此我得到403访问禁止，我的上传请求立即被拒绝。

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

this.uploader=newfileuploader（{url:url，headers:[{name:'X-XSRF-TOKEN'，value:csrfService.getCSRF（）}]}）；

---

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

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

this.uploader=newfileuploader（{url:url，headers:[{name:'X-XSRF-TOKEN'，value:csrfService.getCSRF（）}]}）；

---

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

如果您的令牌更改更频繁，您还可以根据请求设置它。在下面的示例中，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;
};

---

如果您更频繁地更改令牌，还可以根据请求设置它。在下面的示例中，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;
};