允许React前端（带有自签名的ssl证书）调用C# API后端

Question

我开发了一个项目（一个在线商店），前端使用 React，后端使用带有 SLQ 扩展的 C# API。

使用 Swagger 在本地主机上使用 http 和 https 一切正常，但是如果我尝试其他应用程序（例如 Insmonia），如果我在“https://localhost/producto”上使用 GET 方法，则会收到此消息：错误：SSL 对等证书或 SSH 远程密钥不太好

直到我使用自签名 SSL 证书在 Debian 11 虚拟机上部署网站并且对 API 的调用收到此错误时我才意识到：（失败）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();

这是前端调用的示例（process.env.REACT_APP_API_URL 是我部署 API 的 url）

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

如何允许前端到后端的https调用？

我尝试过 Postman、Insomnia、Swagger 等应用程序，尝试了很多示例代码并做了很多研究，但发现除了 3 行代码之外几乎什么都不适用于我的情况。

Answer 1

您遇到的问题是由于您使用的自签名证书造成的。由于证书不可信，跨域请求被拒绝。您可以从 Let's Encrypt 等服务获取免费的签名证书，然后您应该能够从前端应用程序获取您的 api。如果您想继续使用自签名证书进行测试，您可以尝试从浏览器手动或直接从操作系统将其声明为受信任。