CODEWITHSUNDEEP
iosangularionic-frameworkibm-cloudionic4
Bashar Altakrouri
Bashar Altakrouri

Reputation: 10595

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

I have a NodeJS server deployed on IBM Cloud (Bluemix) that has a Restful service exposed using HTTPS. The server also expects Bearer Token by setting the Authorization header.

The server is running and I can make test calls using POSTMAN. The server returns the expected response when a token is available or not.

I could not get my Ionic app (Ionic 4.1.2) to call the service successfully because of issues with the Authorization header.

I am using the HttpClient as follows:

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

Please notice: On the service side, I could debug the header and I can see that the headers Accept and accept-language are set correctly when the header only contains Accept and accept-language.

When adding Authorization header the get call breaks the flow and the get call is not executed correctly not the server.

I am currently testing using the iOS emulator with ionic cordova emulate ios --livereload -lc

On the server side, i am using the following to allow 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();
});

Upvotes: 0

Views: 2224

Answers (1)

Bashar Altakrouri
Bashar Altakrouri

Reputation: 10595

The issue was related to allowing CORS (Cross-Origin Resource Sharing) headers on the server side (NodeJS). The following header configuration did solve the issue and ionic app was able finally to request the backend successfully with bearer tokens.

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

Upvotes: 2

Related Questions