如何在局域网内访问Angular项目并解决Spring Boot认证请求失败问题

一、先验证后端服务的直接可达性 #

• 在局域网其他设备上，用浏览器或curl直接访问后端认证接口，比如执行 curl http://[服务器局域网IP]:8080/api/auth/login（替换成你的实际接口路径）。如果这一步都不通，说明问题出在后端网络或配置：
  • 检查服务器防火墙：Windows防火墙需在“高级设置”里添加入站规则允许8080端口；Linux环境下，可执行 sudo ufw allow from 192.168.0.0/16 to any port 8080 开放整个局域网段的8080端口访问权限。
  • 确认Spring Boot启动日志：启动时必须看到类似 Tomcat started on port(s): 8080 (http) with context path '' 的日志，且绑定地址为0.0.0.0而非127.0.0.1。如果日志显示绑定127.0.0.1，检查配置文件位置是否正确（比如application.properties是否放在resources目录下），或启动命令是否有覆盖配置（比如误加了--server.address=127.0.0.1参数）。

二、检查Angular的API请求配置 #

• 确认环境配置文件（environment.ts/environment.prod.ts）里的API地址是服务器真实局域网IP，而非localhost或占位符ip_server。比如服务器IP为192.168.1.100，配置应写为 apiUrl: 'http://192.168.1.100:8080'。
• 查看浏览器控制台网络请求：在访问Angular的设备上按F12打开开发者工具，切换到“网络”面板，查看认证请求的状态：
  • 如果是CORS相关错误，需在Spring Boot中配置跨域：

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("http://[服务器局域网IP]:4200")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowedHeaders("*")
                    .allowCredentials(true);
        }
    }
    

  • 若使用Spring Security，还要确保OPTIONS请求能被放行，在安全配置类中添加：

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            // 其他安全配置
            ;
    }
    

三、排查接口路径与日志级别 #

• 核对Angular调用的接口路径与Spring Boot Controller的注解路径完全一致。比如Angular请求/api/auth/login，后端Controller需对应@PostMapping("/api/auth/login")，避免路径前缀/后缀差异导致请求匹配失败。
• 调整Spring Boot日志级别：若日志级别过高（如INFO）可能看不到请求记录，在application.properties中添加：

  logging.level.org.springframework.web=DEBUG
  logging.level.org.springframework.security=DEBUG
  

  重新启动后发起请求，就能看到是否有请求到达后端，以及具体的错误细节。

四、其他潜在问题排查 #

• 确认局域网网段一致性：检查服务器与其他设备是否在同一子网，比如服务器是192.168.1.x，其他设备是192.168.2.x，这种情况需调整路由器设置，确保子网间可互通。
• 验证Angular启动参数：虽然你提到已能访问Angular，但仍需确认启动命令是否加了--host 0.0.0.0，完整启动命令应为 ng serve --host 0.0.0.0 --port 4200，否则Angular服务仅绑定本地回环地址，无法被局域网设备访问。

内容的提问来源于stack exchange，提问作者Mohamed Jmal