Angular 4 HTTP post (Authorization headers) not working

Question

I'm using angular 4 http post method calling ASP.NET web API with Authorization header. When calling the web api using postman its works fine, but using angular 4 its not working I'm trying the following methods but not anyone works.

import { URLSearchParams, Http, Headers, Response, RequestOptions, RequestOptionsArgs, RequestMethod} from "@angular/http"

>

1-            
            let headers = new Headers();
            let authToken = accessToken;
            headers.append('Authorization', `Bearer ${authToken}`);
            let options = new RequestOptions();
            options.headers = headers;

            this.http
                .post(url, "", options)
                .subscribe(data => {
                    console.log(data);

                }, error => {
                    alert("error");
                });

Or using this

2-            
            let authToken = accessToken;
            let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
            let options = new RequestOptions({ headers: headers });

            this.http
                .post(url, "", options)
                .subscribe(data => {
                    console.log(data);

                }, error => {
                    alert("error");
                });

And This way

3-
        let authToken = accessToken;
        let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
        this.http
            .post(url, "", { headers: headers})
            .subscribe(data => {
                console.log(data);

            }, error => {
                alert("error");
            });

405 (Method Not Allowed) XMLHttpRequest cannot load http://localhost/domain/api/Account/check. Response for preflight has invalid HTTP status code 405

Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable

Answer 1

Based on this Answer

I remove customHeaders from web.cong

 <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Expose-Headers " value="WWW-Authenticate"/>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, PATCH, DELETE" />
        <add name="Access-Control-Allow-Headers" value="accept, authorization, Content-Type" />
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>

and install this package nuget

Install-Package Microsoft.AspNet.WebApi.Cors

Inside Start use

             public void Configuration(IAppBuilder app)
        {
               //..
                app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
               //..
        }

Angular 4 code

import {  Http, Headers, Response, RequestOptions} from "@angular/http"

let authToken = accessToken;
        let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
        let options = new RequestOptions({ headers: headers });

        this.http
            .post(url, "", options)
            .subscribe(data => {
                console.log(data);

            }, error => {
                alert("error");
            });

And its works!.

Answer 2

3-
    let authToken = accessToken;
    let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
    this.http
        .post(url, "", { headers: headers} as RequestOptionsArgs) //please look at this. here we cast it
        .subscribe(data => {
            console.log(data);

        }, error => {
            alert("error");
        });

Please use this { headers: headers} as RequestOptionsArgs. We need to cast it to RequestOptionsArgs.

Answer 3

You are using, .Net as a server which should support CORS. If you are using chrome then you have to install chrome plugin "Allow-Control-Allow-Origin". Then refresh your browser and try again. This one work in my case I think works for you.