.NET Core 3.1+Angular 8.3项目HTTPS部署异常求助

一、检查HTTPS证书配置 #

• 确保服务器已安装有效的SSL证书，且证书绑定到部署的IP/域名上。如果是自签名证书，必须在Angular客户端所在机器将证书安装到受信任的根证书颁发机构，避免浏览器拦截请求。
• 检查.NET Core Web API的appsettings.json中HTTPS端点配置是否正确：

  "Kestrel": {
    "Endpoints": {
      "Https": {
        "Url": "https://你的部署IP:端口",
        "Certificate": {
          "Path": "证书文件路径.pfx",
          "Password": "证书密码"
        }
      }
    }
  }
  

二、Angular客户端API地址适配 #

• 修改Angular生产环境配置文件src/environments/environment.prod.ts，把API基地址从HTTP改为HTTPS：

  export const environment = {
    production: true,
    apiUrl: 'https://你的部署IP:端口/api'
  };
  

• 全局检查项目中是否存在硬编码的HTTP请求地址，统一替换为HTTPS。

三、调整CORS策略 #

• HTTPS环境下CORS配置需要明确允许HTTPS来源，在.NET Core Web API的Startup.cs中更新配置：

  public void ConfigureServices(IServiceCollection services)
  {
      services.AddCors(options =>
      {
          options.AddPolicy("AllowAngular",
              builder => builder.WithOrigins("https://Angular应用的HTTPS地址")
                                .AllowAnyHeader()
                                .AllowAnyMethod());
      });
      // 其他服务配置
  }
  
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
      // CORS中间件要放在路由之前
      app.UseCors("AllowAngular");
      // 启用HTTPS重定向
      app.UseHttpsRedirection();
      app.UseRouting();
      // 其他中间件配置
  }
  

• 避免使用通配符*允许所有来源，HTTPS环境下部分浏览器会限制该配置，建议指定具体的Angular应用HTTPS地址。

四、排查浏览器安全限制 #

• 按下F12打开浏览器开发者工具，查看控制台和网络标签的错误信息：
  • 若出现Mixed Content错误，说明页面存在HTTP资源请求，需将所有资源（图片、脚本、API请求）的引用改为HTTPS。
  • 若出现CORS错误，按照第三点调整CORS配置。
• 如果是自签名证书，需手动在浏览器中信任该证书，才能正常访问。

五、同解决方案部署的特殊配置 #

• 若Angular构建后发布到Web API的wwwroot目录，确保Web API的静态文件中间件配置正确，允许HTTPS访问静态资源：

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
      // ...
      app.UseStaticFiles();
      // ...
  }
  

• 检查Angular构建后的index.html中，<base href="/">配置是否正确，避免路由跳转时出现HTTPS访问异常。

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