Kong配置根路由后index.html引用静态文件返回404问题如何解决？

问题核心原因 #

你当前配置的/$是精确匹配根路径规则，仅当请求路径严格等于/时才会触发路由转发，/angular/shim.min.js这类带后缀的路径自然无法匹配，因此返回404。你完全不需要把index.html中引用的所有路由单独逐条配置，用以下方案即可解决：

可选解决方案 #

方案1：静态资源前缀匹配（最适配当前场景） #

你的静态资源都统一放在/angular/目录下，同理如果有其他静态资源目录（比如/assets/、/css/等），直接给每个公共前缀配置对应的前缀匹配路由即可：

• 配置路径为/angular/的路由，绑定到你的node上游服务
• 所有以/angular/开头的静态资源请求都会自动匹配该路由，原样转发到node服务，不会影响其他业务接口的路由匹配
  如果后续新增静态资源目录，只需要加对应前缀的路由即可，维护成本极低。

方案2：路由优先级配置（适配带前端路由的Angular项目） #

如果你的Angular项目使用了HTML5路由模式，需要支持用户直接访问/user、/dashboard这类前端路由时返回index.html，可以利用Kong的路由优先级规则实现：

1. 优先配置所有业务API的路由（比如所有/api/开头的请求绑定到对应后端服务），Kong中前缀越长的路由优先级越高，/api/的优先级会远高于根路由
2. 再配置根路径/的回退路由绑定到node静态服务
   此时接口请求会先走对应API路由，剩下的静态资源、前端路由请求才会走到node服务，不会出现无关请求返回首页的问题。

方案3：正则匹配路由（适配零散静态资源路径的场景） #

如果你的静态资源路径比较零散无法统一前缀，可以用正则路由匹配所有静态资源后缀：

• 配置正则路由：/\.(js|css|png|jpg|svg|ico)$，绑定到node上游服务
• 所有后缀为静态资源类型的请求都会转发到node服务，同时可以搭配根路径的精确匹配/$返回index.html，完全不会影响其他接口的请求

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