仅更改某些请求的 HTTP 标头的内容 - Angular2

Question

在我的 Angular2 应用程序中，我添加了一个扩展 BaseRequestOptions 的 CustomRequestOptions 类，以便为我发送到服务器的每个请求添加一些标头。这样做的一个主要目的是设置 Authorization 标头。

import { Http, Response, Headers, BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Globals } from '../globals/globals';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    constructor(private _globals: Globals) {
        super();
        this.headers.set('Content-Type', 'application/json');
        this.headers.set('X-Requested-By', 'Angular 2');
    }

    merge(options?: RequestOptionsArgs): RequestOptions {
       var newOptions = super.merge(options);
       let hdr = this._globals.getAuthorization();
       newOptions.headers.set("Authorization", hdr);
       console.log("content TYPE = "+this.headers.get("Content-Type"));
       console.log("ACCepT = "+this.headers.get("Accept"));

       return newOptions;
    }

}

这非常适合我的要求。

现在我遇到了将照片上传到服务器的需求。以下是我尝试这样做的方法。

savePhoto(photoToSave: File) {

    let formData: FormData = new FormData();
    formData.append('uploadFile', photoToSave, photoToSave.name);

    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });

    let savedPath = this._http
        .post(this._endpointUrl + "tender/save-new/save-photo", formData, options)
        .map(
        res => {
            return res.json();
        }
        )
        .catch(handleError);

    return savedPath;

}

如您所见，我需要将Content-Type 标头更改为multipart/form-data。但是，只要请求通过，自定义请求选项类总是将其重置为 application/json。

我该怎么做？在调用CustomRequestOptions 类之后，有什么方法可以设置我的自定义标题（'Content-Type'、'multipart/form-data'）？

Answer 1

在您的 CustomRequestOptions 构造函数中，您正在调用 super()，它设置您在 savePhoto 中提供的标头，然后用 this.headers.set('Content-Type', 'application/json'); 覆盖它。

要绕过这种情况，我建议先创建一个 RequestOptions 实例，然后再覆盖标头。如下所示。 （免责声明，我没有测试过这段代码）

savePhoto(photoToSave: File) {

    let formData: FormData = new FormData();
    formData.append('uploadFile', photoToSave, photoToSave.name);

    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    let options = new RequestOptions();
    options.headers = headers;
    ...
}

另外，检查您是否可以覆盖单个标头（如果您想保留值'X-Requested-By', 'Angular 2'）

最后，检查 super() 是否可以移动到构造函数的最后一行（我非常怀疑），这样你就不会改变你的 savePhoto() 实现。