发布到服务器后首次加载报403 error如何修复

这类「首次加载报403、手动刷新后恢复正常」的问题，本质都是首次请求和刷新后的请求携带的凭证、命中的服务端/代理规则不一致，90%以上的场景都是以下三类原因：

• 鉴权凭证写入时序问题：首次加载时，服务端还没把合法的会话Cookie、CSRF Token写入浏览器，页面初始化阶段提前触发的需要鉴权的异步接口请求，带的是空/无效凭证，被服务端鉴权中间件拦截返回403。手动刷新时，首次加载返回的页面已经把合法凭证种到了浏览器，后续请求带了有效凭证自然校验通过。
• 代理/CDN缓存错误：CDN、Nginx反向代理的缓存规则配置不当，把之前匿名用户访问触发的403响应缓存到了节点上，首次访问直接命中缓存的错误响应；刷新时触发了缓存强制回源，拿到源站的正常响应就不会报错。
• 服务端路由/权限配置冲突：如果是SPA项目用了history路由模式，服务端没有配置路径重写规则，首次进入非根路径时，web服务器会去匹配对应物理路径的文件/目录，触发目录访问权限限制返回403；还有部分场景是WAF/CC防护规则把首次加载时的并发静态资源请求误判为攻击，临时拦截返回403。

按以下顺序排查定位，对应修复即可：

• 先定位报403的具体请求
  打开浏览器控制台Network面板，勾选Preserve log（保留日志），清空缓存后复现首次加载的场景，找到状态码为403的请求，对比它和刷新后正常请求的差异：
  • 如果是异步接口请求报403：检查请求头里的Cookie、Authorization字段，首次请求时如果凭证为空/和正常请求不一致，就调整前端初始化逻辑：不要在入口文件顶层直接发送需要鉴权的接口请求，把初始化数据拉取逻辑放到凭证写入完成、路由守卫校验通过之后再执行；服务端侧调整中间件执行顺序，确保下发会话凭证的逻辑在页面返回、接口鉴权之前执行，避免页面已经返回给客户端，凭证还没写到响应头里。
  • 如果是静态资源（js/css/图片）报403：先检查静态资源目录的服务器权限，不要给静态资源路径加会话鉴权规则；再排查WAF/CDN的防护规则，把静态资源路径加入白名单，适当调低CC防护的拦截阈值，避免误拦截首次加载的并发请求。
• 修正代理层缓存规则
  给所有需要鉴权的接口路径配置响应头Cache-Control: no-cache, no-store, must-revalidate，禁止CDN、反向代理缓存4xx/5xx状态码的动态响应，如果已经缓存了错误的403内容，手动清空代理节点的缓存即可。
• 修正前端路由适配配置
  如果用了history模式的前端路由，给web服务器配置路径重写规则，确保所有非静态资源的请求都重定向到入口文件index.html，不要让服务器直接匹配前端路由对应的物理路径。比如Nginx站点配置里要在权限规则前加上try_files $uri $uri/ /index.html;，关闭对应站点目录的目录浏览权限拦截，避免触发不必要的403。

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