如何绕过 Angular 应用程序的 .NET 6 SPA 代理？

Question

编辑：我设法使用有效证书通过 IIS 运行此程序，但我还没有找到放弃新代理方法的方法。如果您想了解有关使用 IIS 而不是 IIS Express 的一些信息，请跳至结尾。

简而言之：使用最新的 ASP.NET 6 和 Angular 模板 (Visual Studio 2022)，如何绕过反向代理并使用与以前版本的 .NET 相同的方法？我不想通过 SPA URL 运行应用程序，并将后端请求转发到 SPA 代理。

详细来说，我的目标：

• 没有 IIS Express
• 通过终端手动启动 Angular 服务器。
• 配置 ASP.NET 应用程序以连接到 Angular 服务器，而不是启动自己的实例，
• 使用自签名证书从 IIS 10 的本地实例运行 ASP.NET 应用程序。
• 根据需要将调试器附加到 w3wp。

我想导航到https://mydomain.local并让它为所有内容提供服务，这在 .NET 6 之前不是问题。您可以使用UseProxyToSpaDevelopmentServer、运行npm start，一切都很好。

尽管我知道您仍然可以使用它，但 .NET 6 放弃了它Startup.cs，并且指南建议继续使用简化版Program.cs。

我努力了：

• 摆脱预启动脚本 ( aspnetcore-https.js)
• proxy.conf.js通过删除 proxyConfig 属性来摆脱代理配置 ( )angular.json
• 创建 IIS 启动配置文件并使用配置
• 更改 .csproj 文件中的 SPA 配置值。
• 删除 package.json 中的 --ssl 标志（ssl、ssl-cert 和 ssl-key）
• 定义非默认主机angular.json
• 上述的组合

似乎没有任何效果，文档也不是很好。

眼下：

• 我有一个有效的自签名证书（使用 mkcert 创建）
• 我的域名是在主机文件中设置的
• IIS 中的应用程序设置，我可以使用有效的证书加载它。
• 加载后，它会查找SpaProxyServerUrlcsproj 文件中的属性定义的值
• 一旦 Angular 运行，就会重定向到 https://locaolhost:xxxxx，但证书永远不会有效，我希望从https://mydomain.local提供页面

任何帮助将非常感激。

---

我不确定自签名 ASP.NET 证书有什么问题。我只是删除了它的所有引用并再次添加它们。

• 从中删除证书%AppData%\Roaming\ASP.NET\https
• 通过 Internet 选项清除 SSL 缓存（运行命令inetcpl.cpl：）
• 通过以下方式清除域的所有安全策略chrome://net-internals/#hsts
• 清除 Chrome 历史记录（网站设置、缓存数据等chrome://settings/clearBrowserData）
• 从 Windows 证书存储中删除证书（运行命令：mmc文件 --> 添加/删除管理单元 --> 证书）。删除个人证书和受信任的根证书
• 通过在 VS 中构建项目或运行来再次生成证书dotnet dev-certs https --trust

要放弃 IIS Express 并回复普通 IIS 实例：

• 像往常一样将您的应用程序添加到 IIS。
• 创建 https 绑定，我建议使用它mkcert来创建有效的自签名证书。
• 确保 https 端口与中定义的端口匹配launchSettings.json
• 更新launchSettings.json，请随意删除任何您不需要的配置文件。你想要类似这样的东西：

{
    "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iis": {
            "applicationUrl": "https://yourdomain.local",
            "sslPort": 443
        }
    },
    "profiles": {
        "IIS": {
            "commandName": "IIS",
            "launchBrowser": true,
            "launchUrl": "https://yourdomain.local",
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
            }
        }
    }
}

• 将新的 proxy-conf 文件（我称为 proxy-iis.conf）添加到您的 ClientApp 文件夹中，或更新现有的文件。如果您创建新的，请确保进行更新angular.json以相应地引用它。

const PROXY_CONFIG = [
    {
        context: [
            "/yourRoute",
        ],
        target: "https://yourdomain.local:443",
        secure: false,
        changeOrigin: true,
        logLevel: "info",
        headers: {
            Connection: 'Keep-Alive'
        }
    }
]

module.exports = PROXY_CONFIG;

• 检查您的.csproj文件并确保其中定义的端口与<SpaProxyServerUrl></SpaProxyServerUrl>使用的端口匹配angular.json

就是这样，你就可以走了。手动启动 Angular 应用程序，访问https://yourdomain.local，一切都应该很清楚。

Answer 1

我所做的就是将以下内容添加到我的 package.json 中，这样我就可以手动启动 Angular 并且不需要在每次服务器端更改时重新启动。

{
    ...
    "scripts": {
       "dev": "set ASPNETCORE_HTTPS_PORT=7186 && npm start"
     }  
    ...
}

将 更改7186为 .Net 6 服务器运行的端口（在您的情况下为 443）。然后运行“npm run dev”，等待它加载并启动后端服务器。