添加授权标头时，Angular HttpInterceptor htting 400 bad request答案

【问题标题】：Angular HttpInterceptor htting 400 bad request when adding authorization header添加授权标头时，Angular HttpInterceptor htting 400 bad request
【发布时间】：2018-11-30 02:44:00
【问题描述】：

尝试使用 HTTPInterceptor 添加授权标头时，我一直遇到 HTTP 错误 - 400（错误请求）

我用 Postman 测试过，它可以工作

代码如下：

拦截器

import {Injectable} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class InterceptrorService implements HttpInterceptor {

  constructor() {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
    'x-api-key': 'a404823a-55b8-419e-bcbf-8ebb9ff7bae3',
    }
  });
  return next.handle(req);
 }

}

测试服务

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  constructor(private http: HttpClient) {
  }

  test() {
    return this.http.get('http://motorway:8000/wluntest/test');
  }
}

app.module

providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: InterceptrorService,
  multi: true
}

app.component

constructor(private test: TestService) {
  this.test.test().subscribe(value => console.log(value));
}

这个api是用Gravitee构建的mock api

Angular 版本

Angular CLI: 6.2.4
Node: 10.13.0
OS: linux x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

请帮忙，谢谢

【问题讨论】：

标签： angular rest angular-http-interceptors bad-request

【解决方案1】：

尝试添加这样的标题。

req = req.clone({headers:req.headers.set('x-api-key','a404823a-55b8-419e-bcbf-8ebb9ff7bae3')});

【讨论】：

我记录了标头，标头已添加，但是错误 400 bad request 仍然存在。不知道为什么
顺便说一句，我参考了这个教程：medium.com/@ryanchenkie_40935/…

【解决方案2】：

您的问题是响应正文不是 JSON 对象，因为 http-client 将所有内容都包装到 Object 中（默认情况下）。那么你可以做什么：

将响应正文更改为返回{ msg: 'hello' }，并在回调中由console.log(value.msg) 获取
或者通过添加{responseType: 'text'}来处理它只是纯文本的事实，在您的示例中：
```
test() {
  return this.http.get('http://motorway:8000/wluntest/test', {responseType: 'text'});
}
```

【讨论】：

感谢 Lucho，它仍然返回 400 - 错误的请求。
顺便说一句，我参考了这个教程：medium.com/@ryanchenkie_40935/…
你做了什么改变？邮递员的结果是什么，身体有没有改变？
我错过了您在请求网络日志上的附件，您的最后一个问题似乎是请求的类型，更改为请求方法OPTIONS 似乎很奇怪。您可以在return next.handle(req); 之前的interceptor add console.log(req) 中使用输出更新您的问题吗？
我添加了responseType 并将返回数据更改为返回json，它仍然返回400错误请求。在邮递员中，一切正常查找，返回{"message":"hello"}

【解决方案3】：

这是因为后端的 CROS (Gravitee) Access-Control-Allow-Headers 需要配置为允许自定义标头。

【讨论】：