从安全Angular应用调用非安全API时遭遇混合内容阻止问题

问题分析 #

你的Angular应用采用HTTPS协议（安全站点），直接调用HTTP协议的API会触发浏览器的混合内容拦截机制，这是浏览器默认的安全限制。你配置了开发代理但未生效，可按以下步骤排查修复：

代理配置排查与修复 #

• 确认代理文件路径匹配
  确保proxy.conf.json位于项目根目录，且angular.json中proxyConfig的路径完全对应（若文件在src目录下，需写成src/proxy.conf.json）。

• 统一请求路径格式
  前端发起API请求时必须使用相对路径，比如this.http.get('/api/user/list')，而非直接写完整的HTTP地址http://10.222.244.53:5000/api/user/list，否则请求不会走代理转发。

• 修正angular.json语法错误
  你提供的angular.json存在结构错误，正确的serve配置结构应为：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "atlantis:build",
      "proxyConfig": "proxy.conf.json",
      "ssl": false
    }
  }
  

  注意serve为小写，且必须包含builder字段，缺失该字段会导致代理配置无法被识别。

• 重启开发服务器
  修改代理或angular.json配置后，必须重启ng serve命令，新配置才能生效。

生产环境处理建议 #

开发代理仅适用于本地调试，生产环境中无法依赖此方式解决混合内容问题。需通过以下方式处理：

• 让目标API服务升级为HTTPS协议
• 在后端配置HTTPS反向代理，将前端的HTTPS请求转发至HTTP的API服务

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