ios - 无法通过使用 HttpClient 在 ionic 中设置授权 header 来发送 Bearer token

Question

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

服务器正在运行，我可以使用 POSTMAN 进行测试调用。无论 token 是否可用，服务器都会返回预期的响应。

由于授权 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 ，当 header 仅包含 Accept 和 accept- 时，我可以看到 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(跨源资源共享) header 有关。以下 header 配置确实解决了这个问题，ionic 应用程序最终能够使用不记名 token 成功请求后端。

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();
});