Angular 8使用http.get请求自身前端页面返回404如何解决

核心原因 #

你遇到的404问题本质是混淆了Angular前端路由和服务器端资源路径的差异：

• Angular是单页应用(SPA)，所有路由逻辑都运行在浏览器客户端。你直接在地址栏输入https://192.168.0.177:4200/ping能正常显示，是Angular CLI开发服务器默认对HTML5 History模式路由做了 fallback 配置：所有不存在的服务器路径都会返回根目录的index.html，之后Angular应用启动，识别前端路由规则加载Ping组件，你肉眼看到的PING是前端渲染后的结果，服务器实际返回的响应体是完整的Angular应用HTML代码，不是纯PING文本。
• 用http.get或axios发起请求时，不会触发前端路由逻辑，请求会直接发送到4200端口的开发服务器，服务器上没有/ping对应的真实静态资源或接口，因此直接返回404。就算你修改服务器配置让所有请求都返回index.html，你拿到的也是完整的首页HTML，无法拿到你预期的PING字符串。

需求落地方案 #

你需要的Keycloak会话保活不需要通过请求前端路径实现，有更简单可靠的方案：

• 方案1：直接使用Keycloak官方提供的续期接口，如果你使用keycloak-angular适配器，可定时调用updateToken方法自动续期会话，示例代码如下：

// 可放在根组件ngOnInit或全局初始化逻辑中
setInterval(() => {
  // 剩余有效期小于60秒时才触发刷新，可根据实际需求调整阈值
  this.keycloakService.updateToken(60)
    .catch(() => {
      // 刷新失败代表会话已过期，执行登出逻辑
      this.keycloakService.logout();
    });
}, 10 * 60 * 1000); // 每10分钟执行一次检查

• 方案2：你也可以在3443端口的后端服务新增一个简单的/ping接口，仅返回200状态码，前端定时调用该接口即可：请求会自动携带Keycloak会话Cookie，就能实现会话续期，逻辑更符合前后端分离的规范。

关于原问题的结论 #

不能通过Angular的http.get方法直接获取前端路由对应的组件渲染结果，该请求只会请求服务器端的真实资源，和前端路由无关。

内容的提问来源于stack exchange，提问作者Nelson Teixeira