1

I am having trouble connecting to a third party API using an Authentication header in the format username:password in a Base64 encode format

Here is my Angular service code: auth.service.ts

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(){}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
{
    const authReq = req.clone({
        setHeaders: {
          Authorization: `Basic bWluaXByb2plY3Q6UHIhbnQxMjM=`
        }
      });
return next.handle(req);
}
}

Here is the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { AuthInterceptor } from './interceptors/auth.service';

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

Here is the error when I try to connect with at GET call

The SSL certificate used to load resources from https://api... will 
be distrusted in M70. Once distrusted, users will be prevented from loading 
these resources. See https://g.co/chrome/symantecpkicerts for more 
information.

Any direction at all is greatly appreciated. Thanks!

Melt84
  • 11
  • 2
  • It's just a warning about future releases of chrome it trusting that particular ssl certificate. Do you have an actual error? – David Apr 12 '18 at 06:54
  • And it should be `return next.handle(authReq);` – David Apr 12 '18 at 06:57
  • Thanks! I changed the authReq. I get these two errors `Failed to load resource: the server responded with a status of 401 (Unauthorized)` & `Failed to load https://api...: 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 401`. – Melt84 Apr 12 '18 at 13:55
  • You need to configure your server to handle CORS – David Apr 12 '18 at 13:59
  • It's an external API, is there something I can do on my end? – Melt84 Apr 12 '18 at 18:37
  • No then, apart using your own server as proxy – David Apr 12 '18 at 19:28
  • https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check This solved my problem, CORS issue. – Melt84 Apr 13 '18 at 00:01

0 Answers0