Angular 添加授权时 HttpInterceptor htting 400 错误请求 header

Question

尝试使用 HTTPInterceptor

添加授权时，我一直遇到 HTTP 错误 - 400（错误请求）header

我用 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

构造的模拟 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

请帮忙，谢谢

Answer 1

尝试像这样添加headers。

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

Answer 2

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

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

Answer 3

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

更多信息：https://docs.gravitee.io/apim_publisherguide_configuring_cors.html

Angular 添加授权时 HttpInterceptor htting 400 错误请求 header

Angular HttpInterceptor htting 400 bad request when adding authorization header

rest

bad-request

angular-http-interceptors

angular