How can I properly send Authorization Header with Bearer token in Angular Post Request? - "403 Forbidden" - Strapi

Question

I try to make an Angular call to the Strapi API. When I use the same jwt value as passed to this method, I get 200 and new restaurant is inserted into the Strapi DB. But when I use Angular with a code as below I get "403 Forbidden" error:

  addRestaurant(restaurant, jwt) {
    const t = 'Bearer ' + jwt;
    const params = {data: restaurant, headers: {Authorization: t}};
    return this.httpClient.post('http://localhost:1337/restaurants', params);
  }

Answer 1

The headers should be given separately to the data that you want to post.

Post function should be used like this.

this.httpClient.post(url, data, httpOptions); 

In your case, it should be something similar like that:

addRestaurant(restaurant, jwt) {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type':  'application/json',
             Authorization: 'Bearer ' + jwt;
        })
    };
    return this.httpClient.post('http://localhost:1337/restaurants', restaurant, httpOptions);
  }