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.