Angular应用部署Azure Web App：http.get返回null但网络请求成功

核心排查方向及解决步骤 #

• 检查JSON文件编码与格式
  环境B的config.json可能存在隐性格式问题：

  • 用VS Code等编辑器打开文件，切换为UTF-8无BOM格式重新保存后重新部署。带BOM的JSON会导致Angular HTTP客户端解析失败，返回null，即便网络请求显示内容正确。
  • 验证Azure Web App返回的Content-Type头是否为application/json。若环境B的MIME类型配置异常，可在Azure门户的Web App「配置」→「MIME类型」中添加映射：键为.json，值为application/json。

• 添加错误日志定位解析问题
  给HTTP请求添加错误回调，明确是否存在解析异常：

  private loadConfiguration() {
      this.http.get<AppConfiguration>('assets/config.json').subscribe({
          next: data => {
              this.configration = data;
              this.$configuration.next(this.configration);
          },
          error: err => {
              console.error('配置加载错误详情:', err);
          }
      });
  }
  

  同时核对AppConfiguration接口与环境B的config.json结构，确保属性名、嵌套层级完全匹配（JSON大小写敏感）。

• 清除Azure Web App缓存与验证部署文件

  • 重启环境B的Web App，强制清除静态文件缓存。
  • 通过Kudu工具（https://<你的应用名>.scm.azurewebsites.net/）进入wwwroot/assets/目录，检查config.json的实际内容是否与预期一致，排除部署时的文件篡改或截断问题。

• 排查浏览器安全策略限制

  • 查看浏览器控制台的安全日志，确认是否存在Content-Security-Policy（CSP）或CORS相关警告，这类限制可能导致响应被客户端拦截，表现为返回null。
  • 对比两个环境的Azure Web App CORS配置，确保环境B未设置特殊限制规则。

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