前端连接后端Web API遇SSL协议错误，已配置CORS仍异常

开发全栈应用时，已在Web API中配置CORS允许前端源http://localhost:8080，但调用后端接口时仍出现错误：

GET https://localhost:5241/api/Auth/testconnection net::ERR_SSL_PROTOCOL_ERROR

后端Web API代码（Program.cs） #

using Api.Data;

namespace Api
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // 注册服务到容器
            builder.Services.AddScoped<DataContext>();
            builder.Services.AddControllers();
            // 了解Swagger/OpenAPI配置：https://aka.ms/aspnetcore/swashbuckle
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen();

            // 配置CORS策略
            builder.Services.AddCors(options =>
            {
                options.AddPolicy("DevCors",
                        builder =>
                        {
                            builder.WithOrigins("http://localhost:8080")
                                .AllowAnyMethod()
                                .AllowAnyHeader()
                                .AllowCredentials();
                        }
                    );
                options.AddPolicy("ProdCors",
                        builder =>
                        {
                            builder.WithOrigins("http://e-estates.com","https://e-estates.com")
                                .AllowAnyMethod()
                                .AllowAnyHeader()
                                .AllowCredentials();
                        }
                    );
            });

            var app = builder.Build();

            // 配置HTTP请求管道
            if (app.Environment.IsDevelopment())
            {
                app.UseCors("DevCors");
                app.UseSwagger();
                app.UseSwaggerUI();
            }
            else
            {
                app.UseCors("ProdCors");
                app.UseHttpsRedirection();
            }
            
            app.UseAuthorization();

            app.MapControllers();

            app.Run();
        }
    }
}

前端Vue.js请求代码 #

<script>
// import axios from "@/Backend/Api/axios";
import shaxios from "axios"

export default {
  name: "RegisterPage",
  data() {
    return {
    }
  },
  methods: {
    onSubmit() {
      // axios.Register({
      //     Email: this.email,
      //     Firstname: this.firstName,
      //     Lastname: this.lastName,
      //        Phone: this.phone,
      //     AccountType: this.accountType,
      //     IBAN: this.iban,
      //     PIN: this.pin,
      //     Password: this.password
      //   })
      //     .then(r => {
      //       console.log(r)
      //     })

      shaxios.get("https://localhost:5241/api/Auth/testconnection")
    }
  }
}
</script>

问题分析与解决方案 #

该错误并非CORS配置问题（CORS错误会明确提示跨域相关信息），核心原因是前端用HTTPS请求了仅支持HTTP的后端服务，或后端HTTPS证书未正确配置。

解决方案1：修改前端请求地址为HTTP #

将axios请求中的https改为http：

shaxios.get("http://localhost:5241/api/Auth/testconnection")

解决方案2：在开发环境启用后端HTTPS #

若需后端支持HTTPS，修改Program.cs的开发环境配置，添加HTTPS重定向：

if (app.Environment.IsDevelopment())
{
    app.UseCors("DevCors");
    app.UseHttpsRedirection(); // 添加此行启用HTTPS重定向
    app.UseSwagger();
    app.UseSwaggerUI();
}

同时确保后端launchSettings.json中配置了正确的HTTPS端口（如5241为HTTPS端口），并信任ASP.NET Core开发证书：

dotnet dev-certs https --trust

额外注意：CORS中间件顺序 #

当前代码中UseCors的位置正确（需在UseAuthorization和MapControllers之前调用），后续若出现CORS错误，需严格保证中间件顺序符合要求。

内容的提问来源于stack exchange，提问作者Nikusha Gabidzashvili