Home / Questions / 90120
Accepted
H. Díaz
Asked: 2020-07-25 08:02:16 +0800 CST 2020-07-25 08:02:16 +0800 CST

Angular 2: forbidden error 403

  • 772

Why am I getting a 403 error in firebug when trying to render an image?

The application is being made with the MEAN Stack.

This is the method for the artist service:

getArtist(token, id: string){
        let headers = new Headers({
            'Content-Type' : 'application/json',
            'Authorization': token
        });
        let options = new RequestOptions({headers: headers});
        return this._http.get(this.url + 'getOneArtist/'+ id, options).map(res => res.json());
    }

And I want to put its corresponding image. The fact is that in principle everything has gone well so far, since I have the headers configured in the back-end. CORS.

Here is the HTML:

<div class="image-for-edit" *ngIf="artist.image && artist.image != 'null'">
    <img src="{{url + 'getImageArtist/' + artist.image}}">
</div>

And finally, the controller method:

getArtist(){
    this._route.params.forEach((params: Params) => {
        let id = params['id'];

        this._artistService.getArtist(this.token, id).subscribe(
            response => {
                if(!response.artist) {
                    this._router.navigate(['/']);
                }else{
                    this.artist = response.artist;
                }
            },
            error => {
                var errorMessage = <any>error;
                if(errorMessage != null) {
                    console.log(error);
                }   
            }
        );
    });
}

Any clue why all the places where I want to put an image I have not had a problem and here I have?

angular

1 Answers

  1. Best Answer

    I answer my same question, since I have found a solution. But I don't know if it was a patch to save the bug for a while, or if it was done correctly.

    The thing is that I use middleware for user authorization. And on the backend I had this in the routes file:

    router.get(
  '/getImageArtist/:imageFile', 
  md_auth.ensureAuth, 
  ArtistController.getImageArtist
);

    That was one of the defined routes. According to what you can imagine, it is the route to obtain the image file corresponding to each registered artist.

    Well here was the problem, you can include middleware in the route, and I had inserted the user authorization middleware, which meant, in my opinion, that I couldn't get that file.

    Once that bit is erased, everything works and the image can be displayed.

    I would like that, if someone has read this and thinks that I am not correct or could carry out another procedure, they would comment on it. I don't know if I'm totally right, although I see that it works, and I don't want to influence other users badly.

    • 0