无法通过使用 HttpClient 在离子中设置授权 Header 来发送 Bearer 令牌

Question

我在 IBM Cloud (Bluemix) 上部署了一个 NodeJS 服务器，它有一个使用 HTTPS 公开的 Restful 服务。服务器还需要通过设置授权 header 来获得 Bearer Token。

服务器是运行，我可以使用 POSTMAN 进行测试调用。服务器 returns 令牌可用或不可用时的预期响应。

由于授权问题 header，我无法让我的 Ionic 应用程序 (Ionic 4.1.2) 成功调用该服务。

我正在使用 HttpClient 如下：

    import { Injectable } from '@angular/core';
    import {HttpClient, HttpHeaders} from "@angular/common/http";
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/timeout';

    @Injectable()
    export class MyService {
    accessToken = 'here my bearer token';
    url = 'https://mydeployedproject.eu-gb.mybluemix.net/api/myserviceendpoint';

    constructor(private httpClient:HttpClient) {
        }

    getResultsFromBackend() {

      console.log('Calling restful service: ' + url);

const headers = new HttpHeaders({
              'Accept': 'application/json',
              'accept-language':'en-eu',
              'Authorization':'Bearer mybearertoken'
       });

     var response = this.httpClient.get(url,{headers})
                 .subscribe(response => console.log(response));

    return response;
    }

请注意：在服务端，我可以调试 header 并且我可以看到 headers Accept 和 accept-language 在 header 只包含 Accept 和 accept-language.

添加 Authorization header 时，get 调用中断了流程，get 调用未正确执行，而不是服务器。

我目前正在使用 iOS 模拟器 和 ionic cordova emulate ios --livereload -lc

进行测试

在服务器端，我正在使用以下允许 CORS

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

Answer 1

该问题与在服务器端 (NodeJS) 允许 CORS（Cross-Origin 资源共享）header 有关。以下 header 配置确实解决了问题，离子应用程序最终能够使用不记名令牌成功请求后端。

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    next();
});

无法通过使用 HttpClient 在离子中设置授权 Header 来发送 Bearer 令牌

Unable to send Bearer token by setting Authorization Header in ionic using HttpClient

ios

ionic-framework

angular

ionic4

ibm-cloud