Angular应用部署至Azure Web Apps后出现SSL错误的求助

错误根源 #

这个WRONG_VERSION_NUMBER错误的核心原因通常是协议不匹配：要么你的Angular应用在生产环境错误地保留了本地自签名证书的配置，要么是API调用时把HTTPS请求发往了HTTP端口（或反过来），导致SSL握手时版本协商失败。

Azure Web Apps的SSL管理逻辑 #

• Azure Web Apps默认会为你的应用分配*.azurewebsites.net域名，并自动配置由Microsoft维护的SSL证书，无需你上传本地自签名证书即可实现HTTPS访问。
• 若使用自定义域名，你需要手动绑定SSL证书（可选择Azure免费的App Service证书，或上传自己的合规证书），但基础的HTTPS终止由Azure负责，你的应用无需在代码层处理SSL证书加载。

具体解决步骤 #

1. 修正API调用地址 #

• 检查environment.prod.ts等生产环境配置文件，确保API地址是生产环境的HTTPS地址，不要硬编码本地开发的localhost或端口（比如https://yourapi.azurewebsites.net/api）。
• 错误的协议/端口组合（比如用HTTP请求HTTPS端口）是触发该错误的最常见原因。

2. 移除生产环境的SSL配置残留 #

• 检查angular.json或相关构建配置，确保生产构建（ng build）没有包含任何本地自签名证书的路径配置——这些仅用于开发时的ng serve，生产环境完全不需要。

3. 验证Azure Web Apps的SSL设置 #

• 登录Azure门户，进入你的Web App，在「SSL设置」中确认：
  • 「HTTPS only」选项已开启，强制所有请求通过HTTPS访问。
  • 若使用自定义域名，确认证书已成功绑定，状态显示「已绑定」。

4. 测试API的HTTPS可用性 #

• 用curl或Postman直接请求生产API的HTTPS地址，确认能正常响应且无SSL错误。如果API本身的SSL配置有问题，也会导致前端调用失败。

5. 清除浏览器缓存 #

• 尝试用匿名窗口访问部署后的应用，或清除浏览器缓存，避免旧的HTTP/证书缓存导致的异常。

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