Firefox因CSP问题阻止页面加载——Angular应用故障排查

1. 先抓准控制台错误详情 #

别只笼统说有错误，精准定位才是关键：

• 打开Firefox F12，切换到控制台标签，过滤只查看Error级别信息，重点盯三类报错：
  • 静态资源404（JS/CSS/静态文件加载失败）
  • CSP相关提示（服务器端可能配置了额外CSP响应头，直接覆盖meta标签设置）
  • Angular初始化报错（比如依赖注入失败、路由跳转异常）

2. 核对Angular部署基础配置 #

• 确认构建命令：生产环境必须执行ng build --configuration production，如果用自定义环境配置，要保证environment.prod.ts里的production字段设为true
• 必设baseHref：你的应用部署在/plugin3000/路径下，构建时必须添加参数--base-href "/plugin3000/"，或者在angular.json的build.options.baseHref中配置为"/plugin3000/"，否则静态资源会从根目录加载，直接导致404
• 检查服务器文件路径：登录测试服务器，确认dist打包后的文件是否正确放置到/plugin3000对应的服务器目录（比如Nginx的alias或root配置要指向dist文件夹）

3. CSP问题深度排查 #

• 不要只依赖meta标签：在DevTools网络标签，刷新主HTML页面，查看响应头里是否存在Content-Security-Policy字段——如果服务器（Nginx/Apache）配置了CSP，会直接覆盖meta标签的设置，此时meta标签的配置无效
• Angular生产构建需要兼容内联脚本：
  • 临时测试可使用宽松CSP：script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';
  • 安全方案用nonce：由服务器生成随机nonce，注入到HTML的meta标签和所有内联脚本标签中，CSP里指定script-src 'nonce-xxx'

4. 代理与网络问题排查 #

• 检查sock代理转发：在DevTools网络标签查看所有请求的URL，确认均以https://172.31.11.137/plugin3000/开头，排查是否存在代理篡改路径的情况
• 服务器本地测试：如果能登录测试服务器，使用curl https://172.31.11.137/plugin3000/dashboard或本地浏览器直接访问，排除代理层面的问题
• 检查HTTPS证书：自签名证书可能被Firefox拦截资源加载，可在DevTools安全标签查看证书是否被信任

5. Angular运行时错误定位 #

• 开启生产环境sourcemap：构建时添加--source-map参数（ng build --configuration production --source-map），部署后在DevTools源代码标签可查看未压缩的代码，精准定位初始化报错点
• 核对路由配置：如果服务器未配置SPA路由 fallback，需要在AppRoutingModule中添加useHash: true启用哈希路由，否则刷新dashboard页面会返回404

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