部署后的SAP CAPM React JS应用路由至第二页时出现HTTP 404错误

核心问题分析 #

首页请求正常但第二页API请求404，本质是客户端路由与Managed App Router的服务端路由规则不兼容，或React应用的路径配置存在偏差导致请求路径错误。以下是针对性的排查和解决方法：

1. 配置SPA Fallback路由（最常见原因） #

React是单页应用，客户端路由仅在浏览器端生效，Managed App Router默认会把所有路径当作后端路由处理。导航到第二页后，若刷新页面或请求路径未被正确转发，就会触发404。

• 解决：在xs-app.json中添加SPA fallback规则，将所有未匹配到后端服务的路径重定向到React入口文件index.html，确保客户端路由能正常接管。示例配置：

{
  "routes": [
    // 优先匹配CAPM服务路由
    {
      "source": "^/odata/v4/(.*)",
      "target": "$1",
      "destination": "srv-api"
    },
    // SPA fallback：所有未匹配路径指向React入口
    {
      "source": "^(.*)$",
      "target": "/index.html",
      "authenticationType": "none"
    }
  ]
}

注意：必须把CAPM服务路由放在fallback路由之前，避免API请求被错误转发到React页面。

2. 修正React API请求的路径配置 #

导航到第二页后，若React使用相对路径发起API请求（比如./odata/v4/...），请求会基于当前页面路径（如/second-page/odata/v4/...），而非根路径，导致路由匹配失败。

• 解决：
  • 所有API请求使用绝对路径（比如/odata/v4/your-service/entities），确保请求始终指向根路径下的CAPM服务。
  • 或在React项目的package.json中添加"homepage": "."，让打包后的应用资源和请求路径自适应部署环境。

3. 修正React打包的公共路径 #

若React打包时publicUrl配置错误，会导致第二页的静态资源或API请求路径异常。

• 解决：打包时指定根路径作为公共URL：

npm run build -- --public-url /

确保所有资源和请求路径都基于应用根目录生成。

4. 验证路由优先级 #

检查xs-app.json中的路由顺序，确保CAPM服务的路由规则优先级高于SPA fallback，避免API请求被错误转发到React入口页面。

验证步骤 #

1. 重新打包React应用并部署，同时更新xs-app.json配置。
2. 重启Managed App Router服务。
3. 导航到第二页，查看网络请求的URL是否为根路径下的API地址。
4. 刷新第二页，确认页面和API请求均正常加载，无404错误。

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