从 Heroku Angular 前端调用 Heroku springboot 后端时，Rest 调用返回 403

Posted 2023-02-26

【中文标题】从 Heroku Angular 前端调用 Heroku springboot 后端时，Rest 调用返回 403

【英文标题】：Rest calls return 403 when calling from Heroku Angular frontend to heroku springboot backend

【发布时间】：2020-04-20 20:57:01

【问题描述】：

我已经在 Heroku 上解压了一个简单的 CRUD Springboot 后端。

如果我将前端部署到我的本地环境，休息调用就可以了。 如果我从本地或 Heroku 前端 bash 运行 curl，则其余调用就可以了。 如果我使用 apitester.com 对后端进行休息调用，休息调用很好，包括 OPTION 如果我将前端部署到 Heroku，rest 调用会给我 status=403 错误。在 Heroku 上部署 Angular 应用程序时是否需要做任何特别的事情才能对另一个 Heroku 服务器进行 rest 调用？

我已尝试按照How to Solve 403 Error in Spring Boot Post Request 接受的答案中的建议禁用 csrf。 @CrossOrigin 也被添加到所有的休息控制器中

非常感谢任何帮助

【问题讨论】：

你用邮递员测试了吗？

@JoelJoseph 不，但我用 apitester.com 和 curl（本地和 Heroku 前端 bash）对其进行了测试，两者都有效。我刚刚意识到，如果我从本地运行生产，我也会在后端得到 403。我认为这与我的产品配置有关。感谢您的帮助。

【参考方案1】：

有问题注册CrossFilter Bean 的跨域并且还使用Access-Control-Allow-Origin 注册站点或者您可以查看以下链接here

@Configruation
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class SecurityConfiguration extends WebSecurityConfigurerAdapter

public String crossOriginAllowedHeaders="header1,header2, *" ;
public String crossOriginAllowedSites="site1,site2, * ";

  @Override
    protected void configure(HttpSecurity http) throws Exception 
     )
      http.cors()
           .and()
           .csrf()
           .disable();

             ............
             ...........
        .and()
             .headers()
             .frameOptions()
             .sameOrigin().addHeaderWriter((request,response)->
                                                 response.setHeader("Cache-Control","no-cache, no-store, max-age=0, must-revalidate, private");
                                                 response.setHeader("Pragma","no-cache");
                                                 response.setHeader("Access-Control-Allow-Origin",this.crossOriginAllowedSites);
                                             )






 @Bean
    @Order(Ordered.HIGHEST_PRECEDENCE)
    protected CorsFilter crossFilter() 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.setAllowedHeaders(Arrays.asList(crossOriginAllowedHeaders.split(",")));
        config.setAllowedOrigins(Arrays.asList(crossOriginAllowedSites.split(",")));
        //config.setAllowedHeaders("*"); whitelist all sites
        //config.setAllowedOrigins("*"); whitelist all headers
        config.addAllowedMethod(HttpMethod.OPTIONS);
        config.addAllowedMethod(HttpMethod.GET);
        config.addAllowedMethod(HttpMethod.POST);
        config.addAllowedMethod(HttpMethod.PUT);
        config.addAllowedMethod(HttpMethod.DELETE);
        config.addExposedHeader("Authorization");
        config.setMaxAge(new Long(1800));

        source.registerCorsConfiguration("/api/**", config);
        source.registerCorsConfiguration(MANAGEMENT, config);
        source.registerCorsConfiguration("/v2/api-docs", config);
        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    

我希望这会奏效

【讨论】：

感谢您的回答。我刚刚意识到，在我的 UrlBasedCorsConfigurationSource 配置中，我将允许的来源设置为 localhost:4200，这会覆盖其余控制器上的 @CrossOrigin 注释。我删除了 localhost:4200，它现在可以工作了。