Spring boot, JWT and angular not working : HTTP status code 403 error for method put

Question

I am new to angular and spring-security. I am having problem with updating my data from angular but i can update it using insomnia when i test my api (i pass the token in the header).

Im passing the token to the put method but i get access denied 403

this is my function in angular service

  private headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization':  this.authService.jwt
    });
updateUserById(id: String): Observable<any> {
    console.log(this.headers);

    return this.http.put(this.host_3 + '/' + id, {headers: this.headers});
  }

this is my function in component controller

onSubmit(){
   this.updateCustomer();
  }
  updateCustomer(){
    console.log("inside update"+this.userr);
    this.coordservice.updateUserById(this.userr).
    subscribe(data => console.log("data"+data), error => console.log(error));
  }

this is my backend function in spring controller

 @PutMapping(value = "/customersList/updateCustomer/{idCustomer}")
    public ResponseEntity<Customer> update(@PathVariable(name = "idCustomer") String idCustomer, @RequestBody Customer customer){
        this.customerService.updateCustomer(idCustomer,customer);
        return new ResponseEntity<Customer>(customer, HttpStatus.NO_CONTENT);
    }

Security configuration

rotected void doFilterInternal(HttpServletRequest request,HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {


        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization");
        response.addHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials, authorization");
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");

Note: i can get data using http.get() but for method put i get access denied

Might be blocked due to CORS preflight, you can try first adding OPTIONS in the Access-Control-Allow-Methods: response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS"); - Would be useful if you edited the question with the response headers — Henrique Forlani, Jun 18 '20 at 19:04

score 0 · Answer 1 · answered Jun 19 '20 at 04:05

You may also need to add OPTIONS methods as an allowed method as following

response.addHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE, PATCH");

For CORS, the browser will send the OPTIONS request to verify that it is making a request to correct the server, (known as prefight requests) if it will be successfully responded actual request is initiated.

CSRF token also plays an important role in security. You may have to configure it according to your requirements

To disable you may use .csrf().disable() as following

@Override
    public void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
            .antMatchers("/public-api-such-as-login").permitAll() 
            .anyRequest().authenticated();
    }

If you want to include the CSRF you may use CookieCsrfTokenRepository as follows. You may also like to explore how it works

http
            .csrf()
            .ignoringAntMatchers("endpoint-to-be-ignored-for-csrf")
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
            .and()
            .authorizeRequests()
            .antMatchers("/public-api-such-as-login").permitAll() 
            .anyRequest().authenticated();

Spring boot, JWT and angular not working : HTTP status code 403 error for method put

1 Answers1