如何绕过 blazor wasm 路由系统并调用服务器

关键词：

【中文标题】如何绕过 blazor wasm 路由系统并调用服务器【英文标题】：How to bypass blazor wasm routing system and make calls to the server 【发布时间】：2021-06-02 14:38:20 【问题描述】：

我有一个 blazor wasm 托管应用程序，用户可以通过填写表格来创建帐户。创建帐户后，会向用户发送一封电子邮件，其中包含他/她必须遵循的链接以确认他/她对电子邮件地址的所有权。该链接指向我的服务器中的一个操作方法。同一台服务器托管 blazor wasm 应用和 API。

问题是，当用户单击该链接时，请求不会发送到服务器。相反，blazor 会拦截调用并尝试路由到页面。

我怎样才能做到这一点？如何创建指向我服务器中的操作的链接实际上在单击时将其发送到服务器？换句话说，如果可能的话，如何绕过 blazor 的路由系统？

更新：

我使用 Identity 作为后备存储（但这与我遇到的问题无关）。 我使用基本控制器Url.Action("actionName", "controllerName", actionParam, Request.Scheme); 中的Url 属性生成链接。目前，该链接看起来像 https://localhost:5001/api/user/confirmaemail?confirmationtoken=xyz&useremail=abc Action 是一个发布操作。 当 blazor 尝试重定向到页面时，它显然不能，因为我没有具有这种路由的页面。因此会显示<NotFound /> 组件（App.razor 文件）中的内容。

注意： 这不是错误。这是 balzor wasm 的正常行为。如果应用托管在www.foo.com，那么所有对foo.com（例如www.foo.com/bar）的调用实际上都不会发送到foo.com，而是会被blazor拦截并视为应用中页面的路由.但是，这阻止了我，因为我的 API 与应用程序具有相同的基地址（该应用程序目前位于 localhost:5001/，API 位于 localhost:5001/api/xyz），因此，blazor 阻止调用服务器时我点击链接。问题是如何解决这个问题？如果不可能，我还需要哪些其他选项来实现此流程？

【问题讨论】：

您在项目中使用身份吗？此链接如何请求服务器（获取或发布）？重定向到其他页面时是否有任何错误？ @Karney。我更新了帖子以回答您的问题。 这能回答你的问题吗？ What are the ways for client side blazor to fetch data from server? @GSerg 不是。您指向的问题更多是关于 blazor wasm（客户端）和 blazor 服务器端之间的区别。 它告诉你必须使用 HttpClient 或排序从客户端 Blazor 进行 POST 调用。 【参考方案1】：

所以我通过将 Action 方法设置为 GET 方法而不是 POST 来解决问题。仔细想想，这很合乎逻辑：当用户点击他/她通过电子邮件收到的链接时，将发出 GET，而不是 POST。

我还了解到，仅当您在地址栏中输入地址时，blazor 才会将您路由到页面。如果您单击链接，将发出请求。我认为 blazor 拦截请求的原因是因为单击链接会将我重定向到一个页面，但实际上，它只是一种后备机制。您可以在configure 方法中看到它：

app.UseEndpoints(endpoints =>
        
            endpoints.MapRazorPages();
            endpoints.MapControllers();

            // the link clicked issues a GET. My action is a POST.
            // So no action is found. It falls back to the index.html
            // which is the entery point of my app. Blazor takes over 
            // from here and tries to find a page for the url requested.
            endpoints.MapFallbackToFile("index.html");
        );

【讨论】：

【参考方案2】：

我有同样的问题。我使用 JS Interop 来修复它。代码如图所示。

在 /wwwroot/index.html 中添加以下脚本。

<script>
        function downloadfile(filename, fileContent) 
            var element = document.createElement('a');
            element.setAttribute('href', fileContent);
            element.setAttribute('download', filename);
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        
</script>

在 Blazor WASM Razor 组件中，在 @code 中添加以下函数。

private async void DownloadFile(string fileName)

    //Get the file from the Server Side
    //Convert fileName string to String Content
    var response = await httpService.PostAsync(
       url:"/api/download", content:fileNameStringContent);

    if (response.IsSuccessStatusCode)
    
       var content = await response.Content.ReadAsStringAsync();
       await JSRuntime.InvokeVoidAsync("downloadfile", fileName, content);
    
  

在服务器中添加下面的Controller.Action

[HttpPost("download")]
public async Task<string> Download(string fileName)

    var fileContent = GetFileAsBytes(fileName);
    
    var base64String = "data:application/pdf;base64," + Convert.ToBase64String(fileContent);
    
    return base64String;


private async Task<byte[]> GetFileAsBytes(string fileName)

    try
    
        var folderPath = Path.Combine(_env.ContentRootPath, "folder");\
        if (!Directory.Exists(folderPath))
            return null;

        var filePath = Path.Combine(folderPath, fileName);
        if (!File.Exists(filePath))
            return null;

        var fileBytes = await File.ReadAllBytesAsync(filePath);
        return fileBytes;
    
    catch
    
        return null;
    

【讨论】：

Blazor WASM 页面路由

】BlazorWASM页面路由【英文标题】：BlazorWASMPageRouting【发布时间】：2021-07-1706:14:53【问题描述】：有没有办法通过变量来定义剃须刀组件的页面路由？我希望以这种方式完成的原因之一是，每当我需要在另一个页面上定义重定向... 查看详情

Blazor WASM 路由发布请求到 index.html

】BlazorWASM路由发布请求到index.html【英文标题】：BlazorWASMRoutePostRequesttoindex.html【发布时间】：2021-12-0622:38:00【问题描述】：我有一个使用VisualStudio模板设置的BlazorWASM应用。我在Server项目的Startup.cs文件中的路由如下所示：app.UseBl... 查看详情

如何在 Blazor WASM 客户端中访问 Httpclient 标头

】如何在BlazorWASM客户端中访问Httpclient标头【英文标题】：HowtoaccessHttpclientheadersinBlazorWASMClient【发布时间】：2021-03-3116:58:15【问题描述】：我的客户端代码调用了一个API，我试图从响应标头中获取返回的ETag值。如果我使用Fiddler... 查看详情

Blazor wasm 获取更多信息并添加到用户声明中

】Blazorwasm获取更多信息并添加到用户声明中【英文标题】：Blazorwasmgetadditionalinformationandaddtouserclaims【发布时间】：2021-06-1915:11:29【问题描述】：我正在使用identityserver4进行身份验证，它的布局如下：identityserver4->WebApi->Blazor... 查看详情

Blazor WASM - 如何在布局内更改正文类动态

】BlazorWASM-如何在布局内更改正文类动态【英文标题】：BlazorWASM-howtochangebodyclassdynamicinsideLayout【发布时间】：2020-11-1807:07:28【问题描述】：我有一个Blazor应用程序。在我的Index.html(wwwroot)中，我有以下正文：<bodyclass="vertical-layo... 查看详情

blazor wasm 如何从 di 注入自定义类

】blazorwasm如何从di注入自定义类【英文标题】：blazorwasmhowtoinjectfromdiintocustomclass【发布时间】：2021-04-3006:29:34【问题描述】：有没有办法将httpClient注入到我自己的自定义类中？明确一点-我知道如何在blazor中使用DI注入组件或其... 查看详情

Blazor WASM 没有达到断点

】BlazorWASM没有达到断点【英文标题】：BlazorWASMdoesn\'thitbreakpoint【发布时间】：2020-08-1115:00:27【问题描述】：我有一个带有版本5程序集的BlazorWASM项目，并尝试根据这篇文章激活调试：https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?v... 查看详情

清理缓存后如何恢复 Blazor WASM“离线缓存”？

】清理缓存后如何恢复BlazorWASM“离线缓存”？【英文标题】：HowtoreinstatetheBlazorWASM"offline-cache"afteracleanupofthecaches?【发布时间】：2021-12-2819:36:01【问题描述】：基本上我有一个升级流程，在localStorage和IndexedDB清理之间我还... 查看详情

如何使用 Azure AD B2C 保护 Blazor Wasm 应用访问的 Azure 函数？

】如何使用AzureADB2C保护BlazorWasm应用访问的Azure函数？【英文标题】：HowtosecureanAzureFunctionaccessedbyaBlazorWasmappwithAzureADB2C?【发布时间】：2021-02-2803:37:15【问题描述】：场景：我有一个使用B2C身份验证保护的Blazorwasm应用程序，它需... 查看详情

Blazor Wasm 身份验证

】BlazorWasm身份验证【英文标题】：BlazorWasmAuthentication【发布时间】：2021-11-0515:24:37【问题描述】：我正在尝试构建一个blazorwasm应用程序并尝试使用Jwt令牌进行身份验证。我面临一个有趣的问题。当我登录时，我无法访问具有[Aut... 查看详情

blazor_wasm之3：项目结构

Blazor_WASM之3：项目结构BlazorWebAssembly项目模板可选两种，BlazorWebAssemblyAPP及BlazorWebAssemblyAPP-Empty如果使用BlazorWebAssemblyAPP模板，则应用将填充以下内容：一个​​FetchData​​​组件的演示代码，该组件从静态资产(​​weather.json​​... 查看详情

如何更改 blazor wasm 应用程序的基本 URL

】如何更改blazorwasm应用程序的基本URL【英文标题】：HowtochangethebaseURLofablazorwasmapp【发布时间】：2021-06-2523:06:33【问题描述】：为blazorwasm托管应用程序生成的模板具有从“/”开始的基本URL（即，用于本地开发的https://localhost:5001/... 查看详情

401 blazor wasm + identityserver中如何配置网站域名和IP同时运行？

】401blazorwasm+identityserver中如何配置网站域名和IP同时运行？【英文标题】：401HowtoconfigurethesimultaneousoperationofthesitebydomainnameandIPaddressinblazorwasm+identityserver?【发布时间】：2021-03-2721:36:52【问题描述】：我们启动网站，访问IP地址，... 查看详情

如何更改 Blazor WASM 身份网络核心 3.1 消息“您已注销”、“检查登录状态”和“授权”？

】如何更改BlazorWASM身份网络核心3.1消息“您已注销”、“检查登录状态”和“授权”？【英文标题】：howtochangeBlazorWASMidentitynetcore3.1messages"Youareloggedout","checkingloginstate"and"authorizing"?【发布时间】：2021-01-301... 查看详情

如何在 Blazor WASM 中对当前经过身份验证的用户帐户信息执行 CRUD 操作？

】如何在BlazorWASM中对当前经过身份验证的用户帐户信息执行CRUD操作？【英文标题】：HowdoIperformCRUDoperationsonthecurrentauthenticatedusersaccountinformation,inBlazorWASM?【发布时间】：2021-09-0822:35:35【问题描述】：在BlazorWASM中，我可以让当前... 查看详情

使用客户端、服务器部署解决方案并共享到 azure（Blazor wasm，.net core api）[重复]

】使用客户端、服务器部署解决方案并共享到azure（Blazorwasm，.netcoreapi）[重复]【英文标题】：Deploysolutionwithclient,serverandsharedtoazure(Blazorwasm,.netcoreapi)[duplicate]【发布时间】：2021-07-1318:59:42【问题描述】：这是我的解决方案：这是... 查看详情

具有 ReportViewer 导出功能的 Blazor (Wasm)

】具有ReportViewer导出功能的Blazor(Wasm)【英文标题】：Blazor(Wasm)withReportViewerexport【发布时间】：2021-12-0100:59:11【问题描述】：我正在按照此视频中的说明进行操作：https://www.youtube.com/watch?v=7V0Yb5drLgQ当链接直接放入我剃须刀的组件h... 查看详情

尝试获取资源时出现 Blazor WASM NetworkError。 “CORS 缺少允许来源”

】尝试获取资源时出现BlazorWASMNetworkError。“CORS缺少允许来源”【英文标题】：BlazorWASMNetworkErrorwhenattemptingtofetchresource."CORSMissingAllowOrigin"【发布时间】：2021-03-3118:08:13【问题描述】：在此BlazorWASM应用程序中，我只是尝试... 查看详情