getting 403 forbidden on passing correct token request in header in Angular 8 ,

Question

I am using get method to send 4 data (id , token , ROLE , EMPCODE) in header ,

i am getting error

ERROR HttpErrorResponse {headers: HttpHeaders, status: 403, statusText: "Forbidden"

my token is correct , it I checked in Postman , and I am getting response with status 200 , but I am facing this issue in my Project

I am sharing my code for service file

employeeData( id ,   token , role , employeeCode){
 let headers = new HttpHeaders();
  headers.append('id', id);
  headers.append('TOKEN', token);
  headers.append('ROLE', role);
  headers.append('EMPCODE' , employeeCode);
  headers.append( 'Content-Type' ,  'application/json');


  return this.http.get(this.emp_data, {headers: headers});

}

I am sharing code from Component where I have subscribed for getting response .

viewdetails(){

     this.rest.employeeData(this.userId,this.token,this.role, this.employeeCode).subscribe(
      result => {
        console.log('hello');
        console.log(result);
      })
}

When I checked in Browser's Network Header , I can check Header that I am passing on request is not passed there .

this means your token is invalid. Please check token or create a new token with valid credentials before sending your request. — Channa, Jan 06 '20 at 06:43
@Channa my token is correct , it I checked in Postman , When I checked in Browser's Network Header , I can check Header that I am passing on request is not passed there — ANURAG RANJAN, Jan 06 '20 at 07:14
If your token is valid, its working from postman and you are using the same token from Angular, then try passing the userAgent in the header. If there is cloudfare then it may throw 403 when the userAgent is not passed in the header. Postman by default adds it to the header of the request. — Ani, Jul 18 '20 at 13:54

Raz · Answer 1 · 2020-01-06T06:51:09.747

1

Can be a lot going on here the we don't know like how you get the token, how you generate it etc.

Usually you need to send in the Authorization header what kind of Auth it is. For example a bearer token or something. Like this "bearer {your_token}".

headers.append('Authorization', 'bearer ' + token);

edited Jan 06 '20 at 06:51

answered Jan 06 '20 at 06:44

Raz

8,918
3
27
40

method is get , I have checked response in postman and it is coming file with Same data that I am providing , – ANURAG RANJAN Jan 06 '20 at 06:47
But where is you authorization header? – Raz Jan 06 '20 at 06:49
I don't know much about authorization header , can you elaborate more on this . As per my knowledge this data that I am passing in header is only for authorization – ANURAG RANJAN Jan 06 '20 at 06:52
without bearer , token also I am getting response for other API with same base URL – ANURAG RANJAN Jan 06 '20 at 06:55
Ok, so you are probably using a custom header for the token. Usually it is used in the standard "Authorization" header. If the token isn't shown you need to debug it and see if you really get a token in the request – Raz Jan 06 '20 at 06:58
I had the issue because bearer was removed in some place of the code. – davidvera Feb 23 '23 at 08:11

score 0 · Answer 2 · answered Jan 06 '20 at 07:25

0

as per this question,

try adding headers as follows,

let headers = new HttpHeaders();
headers = headers.set('id', id).set('TOKEN', token).set('ROLE', role).set('EMPCODE' , employeeCode).set( 'Content-Type' ,  'application/json');

answered Jan 06 '20 at 07:25

Channa

3,267
7
41
67

{ "messagecode": 403, "message": "not valid token!" } – ANURAG RANJAN Jan 06 '20 at 08:20

score 0 · Answer 3 · answered Jan 06 '20 at 07:38

0

You can also multiple headers pass like this:

return this.http.get(this.emp_data, 
  {headers: 
    { 'id':id, 'TOKEN':token, 'ROLE':role, 'EMPCODE': employeeCode, 'Content-Type': 'application/json'}
  });

answered Jan 06 '20 at 07:38

Dilip Dalwadi

167
2
10

still getting { "messagecode": 403, "message": "not valid token!" } – ANURAG RANJAN Jan 06 '20 at 08:20

score 0 · Answer 4 · answered Jul 18 '20 at 13:40

I had same problem in my project too :

The problem was the server not handling the new requests/Cross origin requests. On backend of spring-boot micro service I have implemented the WebMvcConfigurer to enable crossOrigin

@Configuration
@EnableWebMvc
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST")
                .allowCredentials(true).maxAge(3600);
    }
}

This helped as well “status”: 403, “error”: “Forbidden”, “message”: “Forbidden”, “path”: “/post/create”

getting 403 forbidden on passing correct token request in header in Angular 8 ,

4 Answers4