【解決方法】Azure にデプロイされた Angular および Spring Boot プロジェクトが期待どおりに動作しない

プログラミングQA


Angularプロジェクトを独自のアプリサービスにデプロイし、Spring Bootも独自のアプリサービスにデプロイしました。2つのアプリケーションはローカルでは正常に動作しますが、本番環境で問題が発生します。「クロスオリジンリクエストがブロックされました: 同一オリジンポリシーにより、リモート リソース (https://mineralsportal-api.azurewebsites.us/auth_api/authenticate) (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ がありません)。ステータス コード: 503」エラーがどこで発生するかわかりませんSpring Boot でリソース共有と corsFilter クラスを有効にするようにクロスオリジン クラスを構成して以来、ローカルでは完全に正常に動作するにもかかわらず、Azure (実稼働) でこのエラーが発生します。

私が試したこと:

これが私のcorsConfigクラスです

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedOrigins("*")
                    .allowedHeaders("*");
            }
        };
    }
}

これが私のcorsFilterクラスです

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.setHeader("Access-Control-Expose-Headers", "Location");
    chain.doFilter(req, res);
    }
    
    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}

}

これが私のsecurityConfigクラスです

@Configuration
@EnableWebSecurity
@SuppressWarnings("deprecation")
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CustomUserService userService;

    @Autowired
    private RequestFilter requestFilter;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userService);
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
    http.cors().disable();
    http.csrf().disable();
    http.authorizeRequests().antMatchers("/auth_api/authenticate").permitAll().anyRequest().authenticated()
    .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    http.addFilterBefore(requestFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

何度もグーグルで調べましたが、問題の解決に役立つ最良の答えを得ることができませんでした。ご提案をいただければ幸いです。

そして、Azureでは、同じjarファイルにパッケージ化せずに、両方のアプリケーションを同じアプリサービス(角度+スプリングブート)で実行するようにデプロイできる手段はありますか?

解決策 1

問題はコードにあるのではなく、デプロイメントに問題があります。 アプリケーションを Azure にデプロイしたと述べましたが、これによって独自の期待がもたらされます。 基本的に、CORS 要求はアプリケーションではなく Azure によってブロックされます。 あなたがする必要があるのは、CORS 機能を自分で管理することです – ドキュメントを見てください。 ここ[^] Azure で CORS を管理する方法を理解します。

[Edit – I posted this response without seeing that this was an old question. The answer still stands though, and could be useful to others in the future.]

コメント

タイトルとURLをコピーしました