HTTPS网站调用HTTP API被阻塞，不改API域名如何解决？

我有一个部署在AWS Elastic Beanstalk环境中的.NET Web API，分配的域名为http://smart-qualify-api-uat.af-south-1.elasticbeanstalk.com/。同时我构建了一个部署在AWS Amplify上的网站，域名为https://www.smart-qualify.com/。

问题在于我的网站想要向该API发起请求，但因请求不安全被浏览器阻止。由于我已向大量用户发布了Flutter移动应用，该应用仍使用这个HTTP协议的API域名，所以无法修改API的域名。

以下是我的API的Program.cs代码：

using Amazon;
using Amazon.S3;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.EntityFrameworkCore;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi.Models;
using smart_qualify_api.Entities;
using smart_qualify_api.Services.ResumeTemplates;
using System.Text;

var builder = WebApplication.CreateBuilder(args);
var config = builder.Configuration;


builder.Services.AddSingleton<IAmazonS3>(sp => new AmazonS3Client(RegionEndpoint.AFSouth1));
// Add services to the container.
builder.Services.AddControllers();
// Add IHttpClientFactory
builder.Services.AddHttpClient();
// Add Template Registry
builder.Services.AddSingleton<TemplateRegistry>();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowNextJsFrontend", builder =>
    {
        builder.AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;

}).AddJwtBearer(options =>
{
    options.RequireHttpsMetadata = false;
    options.SaveToken = true;
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        ValidIssuer = config["Jwt:Issuer"],
        ValidAudience = config["Jwt:Audience"],
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["Jwt:Token"]!))
    };
});
builder.Services.AddAuthorization();

builder.Services.AddSwaggerGen(swagger =>
{
    swagger.SwaggerDoc("v1", new OpenApiInfo { Version = "v1" });

    swagger.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme()
    {
        Name = "Authorization",
        Type = SecuritySchemeType.Http,
        Scheme = JwtBearerDefaults.AuthenticationScheme,
        BearerFormat = "JWT",
        In = ParameterLocation.Header,
        Reference = new OpenApiReference
        {
            Id = JwtBearerDefaults.AuthenticationScheme,
            Type = ReferenceType.SecurityScheme,
        }
    });

    swagger.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Bearer"
                }
            }, Array.Empty<string>()
        }
    });
});

builder.Services.AddAuthorizationBuilder().AddPolicy("AdminUserPolicy", options =>
{
    options.RequireAuthenticatedUser();
    options.RequireRole("admin", "user", "student");
}).AddPolicy("AdminPolicy", options =>
{
    options.RequireAuthenticatedUser();
    options.RequireRole("admin");
}).AddPolicy("UserPolicy", options =>
{
    options.RequireAuthenticatedUser();
    options.RequireRole("user", "student");
});

builder.Services.AddDbContext<SMQDbContext>(options =>
{
    options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection"));
});

var app = builder.Build();

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

//app.UseHttpsRedirection();
app.UseCors("AllowNextJsFrontend");
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

app.Run();

我是否可以通过配置Amplify或修改Next.js应用的源代码来强制发起这些API请求？该网站是静态的，仅作为展示应用功能的落地页，供用户点击链接下载应用。所以即使网站运行在HTTP而非HTTPS协议下也可以接受。

方案1：将Amplify网站切换为HTTP访问 #

既然你接受网站用HTTP协议，可以修改Amplify配置关闭HTTPS强制：

• 进入AWS Amplify控制台，找到你的应用
• 进入Domain management页面
• 关闭"Enforce HTTPS"开关
• 保存配置后，网站可通过http://www.smart-qualify.com/访问，此时向HTTP API发起请求不会触发浏览器混合内容阻止

方案2：用Amplify重写规则代理API请求（推荐，保留HTTPS） #

如果不想放弃网站HTTPS，可以通过代理规避混合内容问题：

1. 在Next.js项目根目录创建/编辑amplify.yml，添加重写规则：

version: 1
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
rewrites:
  - source: /api/<*>:path
    target: http://smart-qualify-api-uat.af-south-1.elasticbeanstalk.com/<*>:path
    status: 200

2. 提交代码并重新部署Amplify应用
3. 修改Next.js代码中的API请求地址，将原http://xxx/api/xxx改为/api/xxx
   这样浏览器向HTTPS网站发起请求，由Amplify代理到HTTP API，绕过混合内容限制

方案3：前端代码强制请求（不推荐） #

浏览器的混合内容阻止是安全机制，无法通过前端代码直接绕过。部分浏览器允许用户手动解除限制，但这需要用户操作，不适合面向普通用户的场景。

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