是否可以自定义503页面？SPA场景下503错误时能否展示自定义文本？

503错误场景下能否展示SPA自定义文本，分两类情况判断： #

• 接口请求返回503：这是最常见的场景，此时SPA的入口静态资源（HTML、JS、CSS）已经全部加载完成，只是后续业务接口请求返回503状态码，你可以正常展示自定义503内容。只需在全局请求拦截器中捕获对应状态码，切换应用状态渲染你开发的503错误组件即可，参考示例如下：

// 以axios拦截器为例
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 503) {
      // 调用全局状态方法，展示503错误页
      globalErrorStore.setErrorType('503')
    }
    return Promise.reject(err)
  }
)

• 入口资源请求返回503：如果用户首次访问你的应用时，服务器直接针对HTML/JS等入口资源请求返回503状态，没有返回任何你的SPA应用代码，此时浏览器无法加载你的前端组件，自然不能展示SPA内定义的自定义内容。这种场景需要在服务器/CDN层面配置503状态对应的返回页面，才能实现自定义内容展示。

补充404错误的实现注意点 #

和503逻辑类似：

• 前端路由不匹配的404，直接在路由规则末尾加兜底路由，匹配所有未命中的路径，渲染你开发的404组件即可。
• 接口/静态资源请求返回的404，可通过拦截器捕获后展示自定义错误提示；如果是入口资源请求返回404，同样需要在服务端/CDN配置自定义404页。

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