如何通过扩展 BrowserXhr 在 Angular2 中设置标题？答案

【问题标题】：How to set headers in Angular2 by extending BrowserXhr?如何通过扩展 BrowserXhr 在 Angular2 中设置标题？
【发布时间】：2017-04-29 10:54:31
【问题描述】：

我正在为 Angular 2 应用程序设置标题。这是我的代码：

 @Injectable()
    export class browserXhr extends BrowserXhr {
      constructor() {}
      build(): any {
        let xhr:XMLHttpRequest = super.build();
         xhr.setRequestHeader('X-Custom-Header', 'value');
        return <any>(xhr);
      }
    }

运行时会报错

【问题讨论】：

您能否将您遇到的错误添加到问题中。
它在 --> xhr.setRequestHeader('X-Custom-Header', 'value'); 处给出错误说无法设置。

标签： angular http-headers xmlhttprequest

【解决方案1】：

如果您不发布错误，则只是猜测出了什么问题。但也许你应该在构造函数中添加一个super() 调用。另一个有趣的地方是类的名字几乎相同，除了大写。在PascalCase 中包含您的班级名称是常见的做法：

 @Injectable()
 export class MyBrowserXhr extends BrowserXhr {
      constructor() {
         super(); //<-- here
      }

      build(): XMLHttpRequest {
        let xhr:XMLHttpRequest = <XMLHttpRequest>super.build();
        xhr.open(method, url, async?, user?, password?); //fill in the correct details
        xhr.setRequestHeader('X-Custom-Header', 'value');
        return xhr;
      }
 }

在您发布错误后，您首先要做的事情就很明显了。在设置请求头之前，你必须使用open方法打开请求：

xhr.open(method, url, async?, user?, password?);

调用此方法后，您将能够设置您的请求标头

【讨论】：

我应用了上述方法，但它给出了错误，我将其发布在问题部分。