如何让带自签SSL证书的React前端调用C# API后端？

我开发了一个在线商店项目，前端使用React，后端为搭载SQL扩展的C# API。本地环境下通过Swagger使用HTTP和HTTPS均正常，但遇到两个问题：

• 使用Insomnia调用https://localhost/producto的GET接口时，出现“Error: SSL peer certificate or SSH remote key was not OK”错误；
• 将网站部署到Debian 11虚拟机并使用自签SSL证书后，前端调用API出现“(failed) err_connection_refused”错误。

后端Program.cs代码 #

using ApiProyecto.Models;
using ApiProyecto.Services;
using ApiProyecto.Helpers;
using Base.Data;
using Microsoft.AspNetCore.Mvc.Formatters;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http.Features;
using System.Globalization;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using System.Net;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.Configure<ApiBehaviorOptions>(opt =>

{

    opt.SuppressModelStateInvalidFilter = true;

});


builder.Services.Configure<FormOptions>(options =>

{

    options.ValueCountLimit = 2147483647;

});
builder.Services.AddCors(p => p.AddPolicy("AllowAll", builder =>
{
    builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
}));

builder.Services.AddControllers(options =>

    {

        var jsonInputFormatter = options.InputFormatters.OfType<SystemTextJsonInputFormatter>().First();

        jsonInputFormatter.SupportedMediaTypes.Add("multipart/form-data");

    })
    .AddXmlDataContractSerializerFormatters()
    .AddXmlSerializerFormatters();


// configure strongly typed settings object
builder.Services.Configure<AppSettings>(builder.Configuration.GetSection("AppSettings"));
builder.Services.AddScoped<IUserService, UserService>();
builder.Services.AddScoped<ProductoService>();
builder.Services.AddScoped<ContactoService>();
builder.Services.AddScoped<PedidoService>();



// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSqlite<BaseDeDatos>("Data Source=tiendadb.db");
builder.Services.AddDbContext<BaseDeDatos>(options =>
         options.UseSqlServer(builder.Configuration.GetConnectionString("BaseDeDatos")));


builder.Services.AddHsts(options =>
{
    options.Preload = true;
    options.IncludeSubDomains = true;
    options.MaxAge = TimeSpan.FromDays(60);
    options.ExcludedHosts.Add("example.com");
    options.ExcludedHosts.Add("www.example.com");
});



builder.Services.AddHttpsRedirection(options =>
{
    options.RedirectStatusCode = (int)HttpStatusCode.TemporaryRedirect;
    options.HttpsPort = 5001;
});


var app = builder.Build();

app.CreateDbIfNotExists();




// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
}
    app.UseSwagger();
    app.UseSwaggerUI();

app.UseSwaggerUI(options =>
{
    options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
    options.RoutePrefix = string.Empty;
});
//cors
app.UseCors("AllowAll");

app.UseHsts();

app.UseMiddleware<JwtMiddleware>();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

前端调用代码 #

export function getProducto(dispatch) {
  fetch(process.env.REACT_APP_API_URL+"/producto").then((result) => {
    result.json().then((resp) => {
      dispatch(todos_productos(resp));
    });
  });
}

一、解决本地Insomnia的SSL证书错误 #

本地ASP.NET Core使用的自签开发证书不被Insomnia默认信任，可通过两种方式解决：

1. 信任本地开发证书
   • 终端执行命令导出证书：

     dotnet dev-certs https -ep $HOME/.aspnet/https/aspnetapp.pfx -p 自定义密码
     

   • 将导出的证书导入系统信任根存储：Windows用证书管理器、macOS用钥匙串访问、Linux参考对应发行版证书信任流程。
2. 临时绕过Insomnia验证
   • 在Insomnia请求设置的「SSL」选项中，勾选「Disable SSL Verification」，仅用于开发测试场景。

二、解决Debian 11部署后的连接拒绝问题 #

1. 确保API监听正确端口和地址 #

修改Program.cs的启动代码，让应用监听所有网卡的HTTPS端口：

// 替换原有的app.Run();
app.Run("https://0.0.0.0:5001");

2. 配置服务器端SSL证书 #

在Debian上生成或上传自签证书，通过代码或环境变量指定证书路径：

• 环境变量方式（启动应用前执行）：

  export ASPNETCORE_Kestrel__Certificates__Default__Path=/path/to/your/cert.pfx
  export ASPNETCORE_Kestrel__Certificates__Default__Password=证书密码
  

• 代码配置方式：

  builder.WebHost.ConfigureKestrel(options =>
  {
      options.ListenAnyIP(5001, listenOptions =>
      {
          listenOptions.UseHttps("/path/to/cert.pfx", "证书密码");
      });
  });
  

3. 开放Debian防火墙端口 #

执行命令开放5001端口：

sudo ufw allow 5001/tcp
sudo ufw reload

4. 前端API地址配置 #

• 确保REACT_APP_API_URL设置为Debian服务器的HTTPS地址，例如https://你的服务器IP:5001，而非localhost。
• 开发测试时，可临时给fetch添加跳过证书验证的配置（生产环境禁止）：

  export function getProducto(dispatch) {
    fetch(process.env.REACT_APP_API_URL+"/producto", {
      rejectUnauthorized: false
    }).then((result) => {
      result.json().then((resp) => {
        dispatch(todos_productos(resp));
      });
    }).catch(err => console.log(err));
  }
  

5. 调整HSTS配置 #

自签证书环境下，HSTS可能引发问题，可临时注释app.UseHsts();，测试正常后再按需配置。

三、生产环境建议 #

• 替换自签证书为Let's Encrypt等可信免费证书，避免客户端信任问题。
• 收紧CORS策略，将WithOrigins("*")改为前端实际域名，提升安全性。
• 使用Nginx作为反向代理处理HTTPS，由Nginx负责证书管理和端口转发，ASP.NET Core作为后端服务运行，配置更灵活安全。

内容的提问来源于stack exchange，提问作者Blas Ramírez Laborde