如何在VS2022的.NET Core中用本地SSL IIS托管调试JS与Web API项目

前提准备 #

• 确保本地IIS已安装ASP.NET Core模块（安装VS时勾选「ASP.NET和Web开发」工作负载会自动配置，也可手动安装）。
• 准备SSL证书：用New-SelfSignedCertificate PowerShell命令生成自签证书，或导入现有证书，需将证书导入「本地计算机-受信任的根证书颁发机构」，避免浏览器安全警告。

步骤1：配置Hosts文件 #

编辑C:\Windows\System32\drivers\etc\hosts，添加主域与子域的本地映射：

127.0.0.1 app.local
127.0.0.1 api.app.local

（替换为你实际使用的域名）

步骤2：配置本地IIS站点 #

主域JavaScript项目站点 #

1. 打开IIS管理器，右键「网站」→「添加网站」。
2. 填写配置：
   • 网站名称：AppLocal（自定义）
   • 物理路径：指向JS项目的编译输出目录（如Vue/React的dist文件夹）
   • 绑定类型：https，IP选*或127.0.0.1，端口443，主机名app.local
   • SSL证书：选择准备好的证书
3. 确认站点状态为「已启动」。

子域Web API站点 #

1. 右键「网站」→「添加网站」。
2. 填写配置：
   • 网站名称：ApiAppLocal（自定义）
   • 物理路径：指向Web API项目的发布目录（后续可通过VS发布到此路径）
   • 绑定类型：https，IP选*或127.0.0.1，端口443，主机名api.app.local
   • SSL证书：选择同一份SSL证书（或多域名证书）
3. 调整应用程序池：
   • 找到对应应用程序池，右键「高级设置」
   • 将「托管管道模式」设为集成，「.NET CLR版本」设为无托管代码（必须配置，否则.NET Core应用无法运行）

步骤3：配置ASP.NET Core Web API项目 #

修改launchSettings.json #

禁用IIS Express，指定IIS托管的HTTPS子域：

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:5000",
      "sslPort": 0,
      "enabled": false // 关闭IIS Express
    },
    "applicationUrl": "https://api.app.local", // 子域HTTPS地址
    "sslPort": 443
  },
  "profiles": {
    "IIS": { // 设置为默认启动配置
      "commandName": "IIS",
      "launchBrowser": false,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

配置CORS与HTTPS #

1. 在Program.cs中启用CORS，允许主域访问：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAppLocal", policy =>
    {
        policy.WithOrigins("https://app.local")
              .AllowAnyHeader()
              .AllowAnyMethod();
        // 若需携带Cookie，添加 .AllowCredentials()，此时Origin不能用通配符
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 启用HTTPS重定向
app.UseHttpsRedirection();

// 启用CORS（需放在路由配置之前）
app.UseCors("AllowAppLocal");

app.UseAuthorization();

app.MapControllers();

app.Run();

2. 在appsettings.json中确认HTTPS端点配置：

{
  "Kestrel": {
    "Endpoints": {
      "Https": {
        "Url": "https://api.app.local:443"
      }
    }
  },
  "AllowedHosts": "*"
}

步骤4：配置JavaScript项目 #

确保JS项目中API请求的基础地址指向子域HTTPS地址：

// 示例：Axios全局配置
axios.defaults.baseURL = 'https://api.app.local';

无需配置开发代理（已通过IIS托管，CORS策略已允许主域访问）。

步骤5：调试流程 #

1. 在Visual Studio中打开Web API项目，选择「IIS」作为启动配置，点击启动调试。
2. 浏览器访问https://app.local，即可调试主域JS代码，调用子域API时，VS会触发断点。

常见问题排查 #

• SSL证书警告：确认证书已导入「本地计算机-受信任的根证书颁发机构」，重启浏览器生效。
• API无法访问：检查IIS站点是否启动，应用程序池是否设为「无托管代码」，CORS策略是否正确指定主域。
• VS调试无响应：确保launchSettings.json中applicationUrl与IIS站点绑定地址完全一致，且VS以管理员身份运行。

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