对 API 的 POST 和 DELETE 调用在 POSTMAN 中有效，但在浏览器中无效

Question

In my Angular project, I am fetching data from the API to add users' favorite movies. I have a POST method written in API, and I call that in my Angular front-end app.

Here is the function in my Angular APP to fetch data from API

public addFavMovie(id: any): Observable<any> {
  const token = localStorage.getItem('token'); const username = localStorage.getItem('user');return this.http.post(apiUrl+`users/${username}/movies/${id}`,   {headers: new HttpHeaders(
{
  Authorization: `Bearer + ${token}`,})}).pipe(
map(this.extractResponseData),
catchError(this.handleError)  );}

Following is the function to add a movie.

addToUserFavs(id: string): void {
console.log(id);
const token = localStorage.getItem('token');
console.log(token)
this.fetchApiData.addFavMovie(id).subscribe((response: any) => {
  console.log(response);
  this.ngOnInit();
  
});
} 

And following is the code in my API

    app.post('/users/:Username/movies/:id', passport.authenticate('jwt', { session: false }), (req, res) => {
  var favMovie = req.params.id;
  console.log(favMovie);
  Users.findOneAndUpdate({ Username: req.params.Username }, {
    $addToSet: { FavouriteMovies: req.params.id }
  },
    { new: true },
    (err, updatedUser) => {
      if (err) {
        console.error(err);
        res.status(500).send('Error' + err);
      } else {
        res.json(updatedUser);
      }
    });
});    

I cannot access this endpoint through the browser when I run the Angular project, but the endpoints work fine when I check them in POSTMAN, and I can add movies through POSTMAN. However, it's giving a 401 status code error in a browser, and the user is not authorized.

Do you know how to resolve this error? Thank you

Answer 1

`Bearer + ${token}`

This is some random syntax you got there bud.

if your token is XXX, the resulting token with this syntax will be

Bearer + XXX

Change to one of either:

Authorization: 'Bearer ' + token
Authorization: `Bearer ${token}`