在 Angular 8 的标头中传递正确的令牌请求时被禁止 403，

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 .

Answer 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);

Answer 2

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');

Answer 3

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'}
  });

Answer 4

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”