Google AppEngine搭配Flask+Angular项目路由刷新404问题如何解决

这是单页应用（SPA）客户端路由的典型表现：Angular的路由跳转完全在浏览器端执行，不会触发服务端请求，所以正常跳转时可以正常访问。但点击浏览器刷新时，浏览器会直接向Google AppEngine发起对应路径的请求，你的服务端既没有对应路径的后端接口，也没有同名的静态文件，因此返回404错误。

你可以选择以下两种方案中的任意一种解决：

方案1：修改app.yaml配置，添加路由 fallback（推荐，URL更美观） #

调整handlers的匹配规则，所有未匹配到静态资源、后端接口的请求，全部返回Angular的入口文件index.html，交由Angular自行处理客户端路由。修改后的完整app.yaml配置如下：

runtime: python38

handlers:
  # 优先匹配后端接口，走Flask处理
  - url: /rest/.*
    script: auto
  # 匹配真实存在的静态资源（js、css、图片等），找到直接返回
  - url: /(.+)
    static_files: dist/\1
    upload: dist/(.*)
    # 可选：添加静态资源缓存配置，提升加载速度
    expiration: "30d"
  # 所有未匹配到的请求，全部返回index.html，支持客户端路由
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html

注意：handlers是按从上到下的顺序匹配的，匹配到第一个符合条件的规则就会终止匹配，不要调整上述规则的顺序。

方案2：切换Angular为Hash路由模式 #

如果不想修改服务端配置，可以直接修改Angular的路由配置，启用HashLocationStrategy，路由会自动带上#前缀，比如xxxx.appspot.com/#/welcome，刷新时浏览器请求的始终是根路径的index.html，不会出现404问题。仅需在Angular的路由模块添加配置即可：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这种方案的缺点是URL中会带有#符号，美观度略低。

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