【前端实战】OBS托管SPA应用刷新404：CDN回源重定向的工程解法

在云原生架构下，将前端编译产物（dist 目录）直接扔进 OBS 对象存储，并套一层 CDN 进行边缘分发，是性价比最高的纯前端部署方案。但开发者常遇到一个致命问题：从首页点击跳转子页面（如 /user/profile）一切正常，可一旦在该页面刷新，直接白屏并提示 404 Not Found。

核心痛点： SPA 应用的路由是由前端 JS（如 Vue-Router）接管的，物理存储层实际上只有一个 index.html。当浏览器向云端直接发起对 /user/profile 的 GET 请求时，OBS 存储桶内自然找不到这个真实文件，从而返回 404。

标准的工程解法是：利用云存储底层的错误拦截机制，强制将 404 流量倒灌回前端入口。

1. 配置 OBS 静态网站托管的错误文档

进入存储桶的“静态网站托管”配置，不要只配置默认首页，必须将默认404错误页面也强制指向 index.html。 通过 CLI 工具或 API 下发托管配置：

// website-config.json
{
    "IndexDocument": {
        "Suffix": "index.html"
    },
    "ErrorDocument": {
        // 💡 核心：出现 404 时，由存储引擎向客户端返回 index.html 的内容
        "Key": "index.html"
    }
}

执行挂载命令：

obsutil website set obs://my-frontend-bucket -config=website-config.json

2. 拦截 CDN 边缘节点的 404 状态码

如果 OBS 前面挂了 CDN，OBS 返回的 404 状态码可能会被 CDN 节点长期缓存。必须在 CDN 控制台配置“自定义错误页面”规则：

• 错误码：404

• 重定向状态码：200

• 重定向URL：/index.html

3. Nginx 独立代理环境的兜底写法

如果你的 SPA 没有使用全托管，而是部署在 ECS 的 Nginx 容器中，必须在 location 块中通过 try_files 指令实现路由回退：

server {
    listen 80;
    server_name www.myapp.com;
    root /usr/share/nginx/html;

    location / {
        # 依次尝试匹配：精确文件 -> 目录 -> 兜底返回 index.html
        try_files $uri $uri/ /index.html;
    }
}

总结： 单页应用的核心在于“伪路由”。通过配置 OBS 与 CDN 的状态码重定向，我们在不额外部署任何后端网关的前提下，将页面解析的控制权完美交还给了前端 JavaScript，实现了真正意义上的高可用 Serverless 静态托管。