crbug/1173575非JS模块文件弃用，React+Laravel站点app子域名部分网络报错

1 域名侧配置差异排查 #

因为另外两个子域名完全正常，优先对比三者的配置差异：

• 对比Web服务器（Nginx/Apache）配置，重点核查3项：
  • app.example.com的.js后缀资源Content-Type响应头是否为application/javascript，误设为text/plain会触发该报错
  • 静态资源的Cache-Control规则是否配置合理，避免设置无校验的超长强缓存
  • 静态资源映射路径是否和另外两个正常站点一致
• 对比三者的DNS、CDN配置：若仅app.example.com接入了CDN，先清空CDN全站缓存，再核对CDN的缓存规则、资源压缩配置和另外两个站点保持一致

2 前端React配置排查 #

• 检查package.json的homepage字段是否配置为https://app.example.com，配置错误会导致静态资源路径解析异常
• 检查打包后index.html的脚本引入标签，避免type="module"和普通脚本混用，JS资源路径优先使用绝对路径
• 临时给所有静态资源URL加上版本号后缀（如main.js?v=20240520），强制客户端跳过旧缓存，验证问题是否消失

3 后端Laravel配置排查 #

• 检查config/app.php中url参数是否设置为app.example.com，避免生成的静态资源URL指向错误域名
• 检查路由规则中是否存在针对app域名的静态资源拦截逻辑，误拦截会导致JS资源加载失败后被Chrome标记为废弃

4 问题复现验证 #

• 在可触发报错的网络环境下，打开Chrome开发者工具Network面板，勾选「Disable cache」后刷新页面，若报错消失即可确认是缓存类问题，针对性调整缓存规则即可
• 对比报错JS资源和正常站点同类型资源的响应头，定位差异项修改即可

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