How to add Authorization Header to Angular http request?

Question

This is my first post.

I've just started learning Go and Angular and I'm attempting to connect the angular app to a go api. I've written both and am stuck identifying the root of the problem. I thought it was a CORS problem, but it works fine if I don't include the headers line of code in my Angular http request. At this point I'm just trying to add the header. The authorization code isn't implemented yet.

Both apps are running locally with the Go app on port 5000 and Angular on 4200

Angular http request that doesn't work:

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

Angular http request that works:

this.http.get<ProjectedBalance>(requestUrl)
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

I'm getting this error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403

I'm using the gorilla/mux and gorilla/handlers in my go code

router := mux.NewRouter()
router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
//start server on port
log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router)))

Headers from Chrome Dev Tools

Request URL:http://localhost:5000/home/2020-12-21
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Mon, 20 Nov 2017 21:39:43 GMT

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,uz;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:5000
Origin:http://localhost:4200

I'm not sure why handlers.CORS isn't working but if you DON'T use CORS, you'll need to proxy your development requests to port 5000. In production you'll be running on port 80 so there's no conflict, but since you're using angular's dev server and running your go server locally, localhost:4200 and localhost:5000 are different origins. I'm not sure what the "angular 5 way" to do this is but webpack-dev-server has an ultra simple proxy field in the package.json and you basically want to replicate that. — bcr
– bcr, Commented Nov 20, 2017 at 21:02
Hello gobuckeyes could you please provide me with the list of headers your client sends in it's request to the API (from the network tab in dev-tools). Also does the issue remain if you set all 3 CORS to {"*"}? — Mihailo
– Mihailo, Commented Nov 20, 2017 at 21:22
@Mihailo I posted the headers from the dev-tools. Changing all three CORS to {"*"} changed the error to a 405 - Method not allowed. Thank you — gobuckeyes2
– gobuckeyes2, Commented Nov 20, 2017 at 21:47
Try turning the AllowedMethods() back to what they were. There should be 2 requests sent from your client one has the method OPTIONS and the other should be GET (for this particular) request. After you revert AllowedMethods try sending the request again, and if the error persists update the question with the data from the GET request. — Mihailo
– Mihailo, Commented Nov 20, 2017 at 21:50

Mihailo · Accepted Answer · 2017-11-20 22:08:45Z

92

Regarding the best way of handling Authentication headers in Angular > 4 it's best to use
Http Interceptors for adding them to each request, and afterwards using
Guards for protecting your routes.

Here's a full example of an AuthInterceptor that I'm using in my app:

auth.interceptor.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

You'll need to register your interceptor in the app.module as a provider:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

You can read about this method further in this post.

Regarding the Go's side of things, this is most likely a case of mismatch between
Request Headers you're sending and the headers CORS allow.
First thing you should try is allowing all of them:

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

And if the problem goes away try carefully structuring your CORS one by one to what your client is sending.

edited Nov 20, 2017 at 22:08

answered Nov 20, 2017 at 21:39

Mihailo

5,0074 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gobuckeyes2 Over a year ago

This worked for adding the header within the Angular app. Thanks! For the Go piece I was able to use this approach. stackoverflow.com/questions/22452804/…

Mihailo Over a year ago

Neat! Glad I could be of some help :) Good luck!

Adrita Sharma · Accepted Answer · 2019-04-02 08:15:37Z

34

In case you don't want to add interceptor, this worked for me:

var header = {
  headers: new HttpHeaders()
    .set('Authorization',  `Basic ${btoa(AuthService.getToken())}`)
}

this.http.get(url, header)

For Bearer,

set('Authorization',  `Bearer ${AuthService.getToken()}`)

answered Apr 2, 2019 at 8:15

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Christiaan Nieuwlaat · Accepted Answer · 2019-10-01 08:01:12Z

3

Angular 6 ==> HTTP Get request example with Authorization Header

public IsClientCreditCardExits(companyId: string, token: any) {
    let header = new Headers({ 'Authorization': `Bearer ${token}` });
    const options = new RequestOptions({
       headers: header,
    });
    return this._http.get(this.ApiURL + "api/Subscriptions/IsClientCreditCardExits/" + companyId + "/", options);    
}

edited Oct 1, 2019 at 8:01

Christiaan Nieuwlaat

1,3699 silver badges14 bronze badges

answered Oct 1, 2019 at 7:09

Mujahid

1271 silver badge8 bronze badges

1 Comment

MindRoasterMir Over a year ago

RequestOptions is depricated.

David Alexander · Accepted Answer · 2017-11-20 21:24:25Z

1

Here is an example:

this.http
        .get(url, return new RequestOptions({
          headers: new Headers({
            Authorization: `Bearer ${authtoken}`
          }),
        }))
        .map(res => res.json());

answered Nov 20, 2017 at 21:24

David Alexander

513 bronze badges

Comments

Hamfri · Accepted Answer · 2020-02-13 13:00:58Z

The following example would fit a situation where you only want some headers added only when accessing resources that require authorization see code below. Kindly note that you need create the getToken method in your authentication.service.ts.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';

import { environment } from '../../environments/environment';
import { AuthenticationService } from '../services/authentication.service';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationInterceptorService implements HttpInterceptor {
  constructor(public authenticationService: AuthenticationService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const accessToken: string = this.authenticationService.getToken();
    // set global application headers.
    request = request.clone({
      setHeaders: {
        'Content-Type': 'application/json; charset=utf-8',
        Accept: 'application/json',
        'X-AppName': environment.xAppName,
        'X-Locale': 'en'
      }
    });
    // Set headers for requests that require authorization.
    if (accessToken) {
      const authenticatedRequest = request.clone({
        headers: request.headers.set(
          'Authorization',
          `Token token=${accessToken}`
        )
      });
      // Request with authorization headers
      return next.handle(authenticatedRequest);
    } else {
      // Request without authorization header
      return next.handle(request);
    }
  }
}

Register the interceptor in app.module.ts as show below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AuthenticationInterceptorService } from './services/authentication-interceptor.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthenticationInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Collectives™ on Stack Overflow

How to add Authorization Header to Angular http request?

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related