访问已部署URL首次出现404空白页、刷新后正常问题求助

1. 单页应用路由未配置服务端 fallback #

这是该类问题最常见的诱因：如果你的站点是Vue/React等框架搭建的单页应用，客户端路由接管了路径跳转，首次访问非首页路径时，服务端没有对应路径的静态资源，就会返回404；刷新后客户端路由完成初始化，就能正常渲染。

• Nginx部署解决方案：在站点配置的location块中添加如下规则

location / {
  try_files $uri $uri/ /index.html;
}

• Apache部署解决方案：在站点根目录新增.htaccess文件，配置重写规则，所有未匹配到静态资源的请求都返回index.html
• 云服务商托管解决方案：在托管平台的配置面板添加重定向规则，所有404请求返回状态码200的index.html文件

2. 静态资源路径与部署目录不匹配 #

你当前使用根路径（/styles/、/js/）引入本地静态资源，如果站点部署在域名子目录下（例如实际访问路径为https://your-domain.com/sub-app/），根路径会指向域名根目录而非子目录，导致首次加载找不到资源，缓存命中后刷新恢复正常。

• 解决方案：
  • 确认站点部署的根路径，若部署在子目录，将资源路径改为相对路径，例如./styles/bootstrap.min.css
  • 若使用构建工具打包，在打包配置中修改publicPath字段为实际部署的子目录路径
  • 检查打包后产物的目录结构，确认styles、js文件夹和index.html处于同级目录

3. 部署时序或CDN缓存问题 #

如果部署时先更新了入口HTML文件，再上传静态资源，首次访问时HTML已经更新但对应静态资源还未上传完成、或者CDN节点还未同步新资源，就会返回404，等资源同步完成后刷新即可正常加载。

• 解决方案：
  • 调整部署顺序：先上传所有静态资源，再替换线上的入口HTML文件
  • 给静态资源文件名添加内容哈希后缀（例如bootstrap.min.8a3d2f.css），避免新旧版本资源冲突，同时配置合理的CDN缓存策略

4. 异步脚本加载顺序异常 #

你引入的opentok.min.js添加了async属性，加载完成时间不固定，如果后续执行的代码依赖该脚本的导出内容，首次加载时脚本还未加载完成就执行后续逻辑，可能引发资源加载错误；刷新后脚本已经存在于本地缓存，加载速度更快就不会触发问题。

• 解决方案：
  • 若后续逻辑依赖opentok能力，移除async属性保证脚本按顺序加载
  • 也可以监听脚本的load事件，等脚本加载完成后再执行依赖相关逻辑

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