Trouble with Http get

I have been trying for 2 days to send a HTTP get request with basic Authorisation. It is being encoded fine and It works on API’s which don’t require Authorisation. The encoding works fine but for some reason I am messing up somewhere. I gives me these errors -

  1. SEC7120: [CORS] The origin ‘http://localhost:8100’ did not find ‘http://localhost:8100’ in the Access-Control-Allow-Origin response header for cross-origin resource at ‘https://api.testsapp.com:8342/v1/shop?limit=10&wholesaler=0’.

  2. HTTP401: DENIED - The requested resource requires user authentication. (XHR)GET - https://api.testsapp.com:8342/v1/shop?limit=10&wholesaler=0

home.page.ts

import { Component } from ‘@angular/core’;
import { HttpHeaders } from ‘@angular/common/http’;
import { HttpClient } from ‘@angular/common/http’;
import { utf8Encode } from ‘@angular/compiler/src/util’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’]
})
export class HomePage {
constructor(private http: HttpClient) {}

get() {
const headersObject = new HttpHeaders();
let test = utf8Encode(btoa(‘username:password1234’));

console.log(test);

headersObject.append('Authorization', 'Basic ' + test);

const httpOptions = {
  headers: headersObject
};

this.http.get('https://api.testsapp.com:8342/v1/shop?limit=10&wholesaler=0', httpOptions)
  .subscribe(response => {
    console.log(response);
  });

}
}

So, you would need to send proper Access Control headers from https://api.testsapp.com:8342/ to your ionic application at localhost:8100 since it’s a cross origin communication.

Thanks for the reply, any examples? This is all very new to me.