如何規避 Angular 應用程序的 .NET 6 SPA 代理？

Question

編輯：我設法使用有效證書通過IIS運行它，但我還沒有找到放棄新代理方法的方法。 如果您想了解有關使用IIS而不是IIS Express的信息，請跳至結束。

In short: Using the latest ASP.NET 6 and Angular template (Visual Studio 2022), how do you go about bypassing the reverse proxy and instead use the same approach as pervious version of .NET? 我不想通過 SPA URL 運行應用程序，后端請求被轉發到 SPA 代理。

詳細來說，我的目標：

• 沒有 IIS 快遞
• 通過終端手動啟動 Angular Server。
• 配置 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 )
• 通過從angular.json中刪除 proxyConfig 屬性來擺脫代理配置（ proxy.conf.js ）
• 創建 IIS 啟動配置文件並使用配置
• 更改 .csproj 文件中的 SPA 配置值。
• 擺脫 package.json 中的 --ssl 標志（ssl、ssl-cert 和 ssl-key）
• 在angular.json中定義一個非默認主機
• 上述組合

似乎沒有任何效果，文檔也不是很好。

眼下：

• 我有一個有效的自簽名證書（使用 mkcert 創建）
• 我的域是在 hosts 文件中設置的
• IIS 中的應用程序設置，我可以使用有效證書加載它。
• 加載時，它會在 csproj 文件中SpaProxyServerUrl屬性定義的值
• 一旦 Angular 運行，重定向到 https://locaolhost:xxxxx，但證書如果永遠無效，我希望從Z5E056C500A1C4B6A7110B50D807BADE1Z提供頁面。

任何幫助將非常感激。

---

更新

我不確定自簽名 ASP.NET 證書有什么問題。 我只是刪除了它的所有引用並再次添加它們。

• 從%AppData%\Roaming\ASP.NET\https中刪除證書
• 通過 Internet 選項清除 SSL 緩存（運行命令：inetcpl.cpl）
• 通過chrome://net-internals/#hsts清除域的所有安全策略
• 清除 Chrome 歷史記錄（站點設置、緩存數據等chrome://settings/clearBrowserData ）
• 從 Windows 證書存儲中刪除證書（ run command: mmc File --> Add/Remove Snap-In --> Certificates ）。 刪除個人證書和受信任的根證書
• 通過在 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匹配

就是這樣，你會對 go 很好。 手動啟動 Angular 應用程序，訪問https://yourdomain.local一切都應該是精明的。

Answer 1

我希望我能很好地理解你想要做什么。 我所做的是我可以手動啟動 angular 並且不需要在每個服務器端重新啟動更改是將以下內容添加到我的 package.json。

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

}

將“7186”更改為運行.Net 6 服務器的端口。 在你的 443 中。然后運行“npm run dev”等待它加載並啟動后端服務器。

希望這對將來有所幫助。