How to authenticate using Authorization Header Token in api requests in angular

Question

I'm about to request a get call to retrieve data from my server. I have enabled authorization to have a Bearer token in most of the requests. How can I include that when I request for something from the server? (what am I doing wrong here? Please help me out.)

For an example, I'm having a file named Categories.service.ts which is going to get categories from the server.

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private _url: string = "http://ifsstudents.educationhost.cloud/v2/categories/list";

  constructor(private http:HttpClient) { }

  private token: string="Bearer eyJ0eXA....";

  getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
      "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
  }
}

I have tested using Postman with the Bearer token, It's working without any issues.

here's the error log

Check for cors errors in the console. If it works in postman but not in angular, this is usually the cause. If not, show more of your code (subscribe, error, handler) and screenshots for network requests/responses (header and data) from your browser — David
– David, Commented May 25, 2020 at 9:27
This is the cross site origin issue for that check your config file and add the enable core entry. — Charanjeet Singh
– Charanjeet Singh, Commented May 25, 2020 at 9:37
Are you trying to connect to a established server with a test-app ?, if yes, proxy-config approach may work for you — Supun De Silva
– Supun De Silva, Commented May 25, 2020 at 9:38

Supun De Silva · Accepted Answer · 2020-05-25 10:49:13Z

Change CategoriesService as follows

@Injectable({
providedIn: 'root'
})
export class CategoriesService {

private _url: string = "/api/categories/list";

constructor(private http:HttpClient) { }

private token: string="Bearer eyJ0eXA....";

getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
    "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
}
}

in your root folder (same level as src folder) create a file called proxy.conf.json with the following content

{
  "/api/*": {
    "target": "http://ifsstudents.educationhost.cloud/v2",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Start the app with

ng serve --proxy-config proxy.conf.json -o

Keep an eye on the console to see if the route transformation happen correctly you should see something like follows

[HPM] Rewriting path from "/api/categories/list" to "/categories/list" [HPM] GET /api/categories/list ~> http://ifsstudents.educationhost.cloud/v2

If you intend to Productionize this, you need to enable appropriate CORS rules in ifsstudents.educationhost.cloud

Collectives™ on Stack Overflow

How to authenticate using Authorization Header Token in api requests in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related