Question

在我的Angular2应用程序中，我添加了CustomRequestOptions类扩展BaseRequestOptions，以便为我发送到服务器的每个请求添加一些标头。这样做的一个主要目的是设置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()实现。

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

1 个答案: