Question

我面临着无法使用JWT拦截器进行api调用的问题。我得到了：

不支持内容类型'text / plain; charset = UTF-8'

我猜是因为JWT拦截器正在删除标头并添加Bearer东西，这是我的JWT拦截器。

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // add authorization header with jwt token if available
    let credentials = JSON.parse(localStorage.getItem("credentials"));
    console.log(JSON.stringify(credentials.accessToken));
    if (credentials && credentials.accessToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${credentials.accessToken}`
        }
      });
    }

    return next.handle(request);
  }

}

我尝试过邮递员，如果我不理会这个标头，它会说同样的问题，但是当我添加Content-Type application/json时，它可以解决问题，但是在Angular中，我如何添加标头，但替换？

Answer 1

如果目标是在保留现有标头的同时添加授权标头，在这种情况下为content-type，则可以使用request.headers.set()代替setHeaders()，因为setHeaders()会完全替换标头：

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // add authorization header with jwt token if available
    let credentials = JSON.parse(localStorage.getItem("credentials"));
    console.log(JSON.stringify(credentials.accessToken));
    if (credentials && credentials.accessToken) {
      request = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${credentials.accessToken}`)
      });
    }

    return next.handle(request);
  }
}

希望有帮助！

Answer 2

从理论上讲，您应该能够像添加了Authorization标头一样添加标头：

    if (credentials && credentials.accessToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${credentials.accessToken}`,
          "Content-Type": "application/json"
        }
      });
    }

或者，您可能想检查请求的发起方，以确保它不是最初设置错误标头的人。

查看有角度的源代码（https://github.com/angular/angular/blob/f8096d499324cf0961f092944bbaedd05364eea1/packages/common/http/src/request.ts#L369）setHeaders似乎可以添加或更新任何现有的标题，并保留您不提及的标题：

    if (update.setHeaders !== undefined) {
      // Set every requested header.
      headers =
          Object.keys(update.setHeaders)
              .reduce((headers, name) => headers.set(name, update.setHeaders ![name]), headers);
    }

JWT拦截器删除contentype标头

2 个答案: