Question

fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
  let file: File = fileList[0];
  let formData:FormData = new FormData();
  formData.append('files', file, file.name);

  var headers = new Headers();
  headers.append('Content-Type', 'multipart/form-data');
  headers.append('Authorization', 'Bearer ' + this.token);
  headers.set('Accept', 'application/json');

  let options = new RequestOptions({ headers: headers });
  this.http.post('http://localhost:1337/upload', formData, { headers: headers, method: 'POST' })
    .subscribe( res=> {
      console.log(res)
      //error => console.log(error)
    })
}
}

结果：

{"statusCode":403,"error":"Forbidden","message":"Forbidden"}

如果我删除了对授权的需求，它会上传良好，这使我相信这与标题有关。

某事不正确，我不知道该怎么办。我尝试了一堆替代方法，但仍然卡住了。

Answer 1

似乎Authorization标头不允许在服务器上上传文件。因此，您必须在Access-Control-Allow-Headers中添加授权以防止出现此问题。进一步了解issue

Answer 2

我认为这里的问题是headers.set。请使用这个，

var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', 'Bearer ' + this.token);
headers.append('Accept', 'application/json');

注意：Headers.set和append（）之间的区别在于，如果指定的标头已经存在并接受多个值，则Headers.set将用新值覆盖现有值，而append（）将追加新值到一组值的末尾。

来源：append vs set

Angular 6-HTTP Post上未添加标题

2 个答案: