Azure部署Angular与Spring Boot遇CORS问题及同服务部署咨询

CORS错误与503状态码排查修复 #

首先注意到报错中的状态码是503（服务不可用），这说明请求未正常到达Spring Boot应用或应用未启动成功，CORS header缺失是该问题的衍生结果，按以下步骤排查修复：

1. 检查Spring Boot应用在Azure的运行状态

   • 登录Azure Portal，进入Spring Boot对应的App Service，查看「日志流」（Log Stream），排查应用启动日志是否存在异常（如数据库连接失败、端口冲突、依赖加载错误等）。
   • 若启用了Spring Boot Actuator，直接访问https://mineralsportal-api.azurewebsites.us/actuator/health，确认服务是否正常响应。

2. 修复Spring Security的CORS配置冲突
   你的SecurityConfig中设置了http.cors().disable()，这会直接关闭Spring Security的CORS支持，导致自定义的CorsConfig和CorsFilter无法生效。修改方式如下：

   • 移除http.cors().disable()，改为启用CORS并绑定自定义配置源：

     @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()，改为启用CORS并绑定配置源
             http.cors().and()
                 .csrf().disable()
                 .authorizeRequests()
                     .antMatchers("/auth_api/authenticate").permitAll()
                     .anyRequest().authenticated()
                     .and()
                 .sessionManagement()
                     .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
             http.addFilterBefore(requestFilter, UsernamePasswordAuthenticationFilter.class);
         }
     
         // 定义统一的CORS配置源Bean
         @Bean
         public CorsConfigurationSource corsConfigurationSource() {
             CorsConfiguration configuration = new CorsConfiguration();
             configuration.setAllowedOrigins(Arrays.asList("*")); // 生产环境建议指定具体域名而非通配符
             configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
             configuration.setAllowedHeaders(Arrays.asList("*"));
             configuration.setExposedHeaders(Arrays.asList("Location"));
             configuration.setMaxAge(3600L);
     
             UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
             source.registerCorsConfiguration("/**", configuration);
             return source;
         }
     }
     

   • 删除原有的CorsConfig和CorsFilter类，避免重复配置引发冲突。

3. 验证Azure App Service的CORS设置
   进入Azure Portal中Spring Boot App Service的「CORS」配置页，若之前手动添加过域名，建议清空或与代码配置保持一致，避免双重配置导致异常。

Azure同App Service部署Angular与Spring Boot的方案 #

可以将Angular和Spring Boot部署在同一个App Service，无需打包为同一JAR文件，通过**虚拟应用程序（Virtual Applications）**实现：

1. 部署Spring Boot应用
   将Spring Boot应用打包为JAR，部署到App Service的根目录（默认路径/site/wwwroot）。

2. 配置虚拟应用程序

   • 登录Azure Portal，进入目标App Service，选择「配置」→「路径映射」→「虚拟应用程序和目录」。
   • 点击「添加虚拟应用程序」：
     • 虚拟路径：填写/client（或自定义前端访问路径）
     • 物理路径：填写/site/wwwroot/client
     • 勾选「应用程序」选项。

3. 部署Angular应用

   • 执行ng build --prod构建Angular应用，生成dist目录。
   • 将dist目录下的所有文件上传到App Service的/site/wwwroot/client目录（可通过Azure CLI、FTP或Deployment Center完成）。

4. 路由适配

   • Angular端：在angular.json中设置baseHref="/client/"，确保路由与虚拟应用路径匹配。
   • Spring Boot端：确保API路径（如/auth_api/）不与前端路径冲突。

内容的提问来源于stack exchange，提问作者Janeth Jackson