Spring boot、JWT 和 Angular 不起作用:方法 put 的 HTTP 状态代码 403 错误

Posted

技术标签:

【中文标题】Spring boot、JWT 和 Angular 不起作用:方法 put 的 HTTP 状态代码 403 错误【英文标题】:Spring boot, JWT and angular not working : HTTP status code 403 error for method put 【发布时间】:2020-10-08 22:34:04 【问题描述】:

我是角度和弹簧安全的新手。我在从 Angular 更新数据时遇到问题,但我可以在测试我的 api 时使用失眠更新它(我在标头中传递令牌)。

我将令牌传递给 put 方法,但我得到拒绝访问 403

这是我在角度服务中的功能

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

这是我在组件控制器中的功能

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

这是我在 spring 控制器中的后端功能

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

安全配置

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

注意:我可以使用 http.get() 获取数据,但对于 put 方法,我会拒绝访问

【问题讨论】:

可能由于CORS preflight而被阻止,您可以尝试先在Access-Control-Allow-Methods中添加OPTIONS:response.addHeader("Access-Control-Allow-Methods", "GET, POST , 放置, 删除, 补丁, 选项"); - 如果您使用响应标题编辑问题会很有用 看起来像是 Spring 安全性的 XSRF 保护。 【参考方案1】:

您可能还需要添加 OPTIONS 方法作为允许的方法,如下所示

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

对于 CORS,浏览器将发送 OPTIONS 请求以验证它是否正在发出更正服务器的请求(称为预检请求),如果它会成功响应,则实际请求已启动。


CSRF 令牌在安全方面也起着重要作用。您可能需要根据自己的要求进行配置

要禁用你可以使用.csrf().disable()如下

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

如果你想包含 CSRF,你可以使用CookieCsrfTokenRepository,如下所示。您可能还想探索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 和 Angular 不起作用:方法 put 的 HTTP 状态代码 403 错误的主要内容,如果未能解决你的问题,请参考以下文章

将 Angular 与 JWT 的 Spring Boot 连接时出现 CORS 错误

使用带有 JWT 的 Angular 和 Spring Boot 服务的 PUT 请求出现 403 错误

Spring Boot 2 和 Security With JWT 无法提供 Angular 构建的静态内容

Spring Boot + Angular 2 + JWT

问题让 Spring Boot 的 jwt 变为 Angular

Spring Boot JWT Cors 不适用于 Angular 8