如何解决Angular+ASP.NET Core Web API的HTTPS/HTTP混合内容问题？

核心问题是浏览器的混合内容策略：HTTPS页面不允许发起HTTP请求，请求会被浏览器拦截。以下是几种可行的解决方法：

1. 给后端API配置HTTPS（最优生产方案） #

Smarter Asp支持为站点配置HTTPS，直接给ASP.NET Core Web API启用HTTPS即可彻底解决问题：

• 登录Smarter Asp控制面板，找到目标站点，申请免费SSL证书（如Let's Encrypt）
• 在ASP.NET Core项目中确保启用HTTPS重定向：
  修改Program.cs（或旧版本的Startup.cs），添加如下代码：

  app.UseHttpsRedirection();
  

  发布项目时确认勾选启用HTTPS选项
• 将前端Angular应用中的API请求地址替换为HTTPS版本（https://smartapi.com/.....）

2. 在Netlify配置反向代理（临时过渡方案） #

如果暂时无法为后端配置HTTPS，可以通过Netlify的重写规则实现代理转发，让前端通过HTTPS请求Netlify，再由Netlify转发到HTTP后端：

• 在Angular项目根目录创建netlify.toml文件，添加以下配置：

  [[redirects]]
    from = "/api/*"
    to = "http://smartapi.com/...../:splat"
    status = 200
    force = true
    headers = { Access-Control-Allow-Origin = "*" }
  

• 修改Angular应用中的API基础地址，将原HTTP地址替换为/api（例如原请求http://smartapi.com/../users改为/api/users）
• 重新部署Angular应用到Netlify，即可通过Netlify域名的HTTPS请求转发到后端API

3. 临时调整浏览器混合内容设置（仅测试用） #

如果仅用于本地测试，可临时修改浏览器设置允许混合内容：

• Chrome：点击地址栏锁图标 → 站点设置 → 不安全内容 → 设置为“允许”
• Firefox：点击地址栏锁图标 → 连接安全 → 禁用“阻止不安全内容”
  注意：此方法仅适合个人测试场景，绝对不能用于生产环境的公开站点

内容的提问来源于stack exchange，提问作者AZZOUNI MOHAMED AMIR