Ionic 3.5.2 Authorization header missing in http request

Question

I am testing with the Ionic Framework 3.5.2 and here is the version info

I need to send a authentication request with a authorization header appended to get user signed in to the system, like this

I always get 404 error, I already have the CORS enabled. I use the postman to double check, I send the same request with postman it looks okay without any issue.

I double check with the fiddler, I found a difference, that is the header Authorization is missing, it is not sent along with my request. There might be something not right with my code since the postman works, no issue with the server implementation.

this is the request sent by Postman, with authorization header, so it is okay

and here is my request, don't see the Authorization header sent along, so I got 404

Can you advise what I miss?

Edit 1: to add a screenshot for Anexon

Edit 2: [July 15] I see that Angular is sending my request with method OPTION while the Postman uses POST which works. My question now is that how can I send a POST exactly like the Postman?

just in case in order to support the OPTION, what should I do from the server side implementation? But this is a "just in case", the server now looks just fine with POST.

here is the Postman's

POST https://abc.xyz.com/SignIn HTTP/1.1
Host: abc.xyz.com
Connection: keep-alive
Content-Length: 63
Accept: application/vnd.softix.api-v2+json
Postman-Token: c2aa12cc-ea95-59d6-79de-4829b96b759b
Cache-Control: no-cache
Origin: chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3147.0 Safari/537.36
Authorization: Bearer yTJVNAb4_4h0BRTEA8MoNBuQhpKXuO6BvyIabbSDZMdBW_RTG2_tNME7R_RqeFqMjg2
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,vi;q=0.6

{ "Username" : "user", "Password" : "pass" }

and here is mine

OPTIONS https://abc.xyz.com/SignIn HTTP/1.1
Host: abc.xyz.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://evil.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3147.0 Safari/537.36
Access-Control-Request-Headers: authorization,content-type
Accept: */*
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,vi;q=0.6

Answer 1

Have you checked that authHeader variable isn't empty?

Second, I'm using following headers.append('<header-type>', '<header-content>') instead of headers.set('<header-type>', '<header-content'>). I think that you are overriding headers value, so I would change it to:

let authHeader = 'Bearer $(this.authTokenResponse.access_token)';

headers = new Headers();
headers.append('Authorization', authHeaders);
headers.append('Accept', 'application/vdn.softix.api-v2+json');
headers.append('Content-Type', 'application/json');

// ...

Edit 1

Also, I noticed another difference. I use post options directly as any object type, instead of using RequestOptions constructor:

let options = {};
options.headers = headers;

post('<url_request>', signinRequest, options)
  .map(res => res.json())
  .subscribe(data =>{
    this.signinResponse = data;
    console.log(data);
  })

Answer 2

I think I figure out my problem. I used the chrome extension Allow-Control-Allow-Orginin for CORS, I thought it works but it doesn't. I switch to use proxy instead, then it is okay now, nothing changed with my code.