如何在 angular-oauth2-oidc 中将 header content-type 设置为 application/json？

Question

我正在使用 fetchTokenUsingPasswordFlow 方法将 Content-Type header 设置为 application/json，但它会变成 application/x-www-form-urlencoded。有什么方法可以将 header content-type 设置为 application/json?

根据源代码，Content-Type header 已被硬编码为 application/x-www-form-urlencoded。

我正在为后端使用 spring boot rest 服务，它不允许 application/x-www-form-urlencoded 作为 Content-Type。请在下面找到示例 Angular 6 代码供您参考：

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Usermodel } from '../models/usermodel';
import { OAuthService } from 'angular-oauth2-oidc';
import { HttpHeaders } from '@angular/common/http';

@component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  @input() message: any;
  @input() apiUrl: any;
  @input() params: any;
  currentUser: Usermodel;
  model: any = {};
  loading = false;
  returnUrl: string;
  headers: HttpHeaders;

  constructor(private router: Router,
    private route: ActivatedRoute,
    private oauthService: OAuthService,
  ) {
    oauthService.tokenEndpoint = "http://localhost:7890/api/login";
    oauthService.requireHttps = false;
    this.oauthService.setStorage(localStorage);
    this.headers = new HttpHeaders().set('Content-Type', 'application/json');
    console.log('oauthtoken', this.oauthService.getAccessToken());
  }

  ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  public login() {
    this.loading = true;
    this.apiUrl = 'login'
    console.log("Headers::->" + this.headers)
    this.oauthService.fetchTokenUsingPasswordFlow(this.model.userName, this.model.password, this.headers).then((resp) => {
      console.log('resp', resp);
    });
  }
}

Answer 1

前段时间看到一个similar issue on the angular-oauth2-oidc repo，我在这里重复我的回复作为答案，方便大家查找。

库硬编码 application/x-www-form-urlencoded，我认为可能是正确的：RFC 6749 seems to prescribe this:

4.3.2. Access Token Request

The client makes a request to the token endpoint by adding the following parameters using the "application/x-www-form-urlencoded" format...

我有点惊讶您的 spring 启动包不支持更改资源所有者密码流的令牌请求端点的可能内容类型，您可以尝试仔细检查一下吗？

或者，您可以使用适当的 spring-boot 包提交问题？

此时我看到的唯一最后一个选项（除了不使用库，对于该流程来说这是很有可能的）是分叉库并为您的自定义构建自己更改内部结构。

如何在 angular-oauth2-oidc 中将 header content-type 设置为 application/json？

How to set header content-type as application/json in angular-oauth2-odic?

content-type

angular6

angular-oauth2-oidc