无法从 Blazor WebAssembly 应用本地访问 Azure Function Api
Posted
技术标签:
【中文标题】无法从 Blazor WebAssembly 应用本地访问 Azure Function Api【英文标题】：Can't access Azure Function Api locally from Blazor WebAssembly app 【发布时间】：2021-05-22 23:40:02 【问题描述】：我在 Visual Studio 中有一个 Blazor WebAssembly 项目。我现在刚刚向解决方案添加了一个 Azure Function 项目。我打算将此发布到新的 Azure 静态 Web 应用程序。
我一直按照 Microsoft 文档中的说明进行操作。
Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps
根据文档，我只需要使用 launchSettings.json 在本地设置 CORS，然后在 Visual Studio 中同时运行 Api 和客户端项目。然后我应该能够像这样调用 Api。
string test = await Http.GetStringAsync("api/Test");
测试后，字符串变量“test”只返回以下内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Client</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="Client.styles.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <div id="app">Loading...</div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">????</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body> </html>
这似乎只是同一页面的 HTML，但带有“发生了未处理的错误”。您通常会在页面底部看到的消息以及重新加载链接。然而这并没有发生，我只是得到它的 HTML。很明显，出了点问题，并且没有显示错误。
另外，查看浏览器控制台日志并没有显示任何错误，这很奇怪。通常当收到这样的错误时，浏览器日志中有一些内容。
如果我将代码中的 Api 调用更改为以下内容，则可以正常工作。
string test = await Http.GetStringAsync("http://localhost:7071/api/Test");
显然我不能保持这种状态，因为我必须在发布到实时站点之前更改每个回调。但是，这表明它正在工作，客户端由于某种原因仅使用“api/Test”时看不到 api。
我在我丢失的文档中看不到任何其他内容。为什么文档说它不适合我时应该工作？我可能会错过什么？
【问题讨论】：
作为起点，我将使用浏览器中的开发者控制台检查您的实际 HTTP 调用（通常在网络选项卡中）并将其与硬编码版本进行比较。 谢谢，但我只是偶然发现了解决方案。不幸的是，Microsoft 文档没有显示完整的图片。所以我实际上错过了一些东西。 【参考方案1】：因此，在将我的代码与 the github repository used by the Microsoft documentation 中的代码仔细比较后，我发现他们在 Client/wwwroot 文件夹中有一个名为 appsettings.Development.json 的文件，该文件用于为客户端应用程序提供 URL 前缀，以便它可以本地访问Api项目：
"API_Prefix": "http://localhost:7071"
这个前缀会被添加到 Program.cs 中的 BaseAddress 之前：
builder.Services.AddScoped(sp =>
new HttpClient BaseAddress = new Uri(builder.Configuration["API_Prefix"] ?? builder.HostEnvironment.BaseAddress) );
令人沮丧的部分是文档完全忽略了这一点，并且没有表明这是必要的步骤。
我在这里发布这个以防其他人遇到同样的问题。
【讨论】：
嗨@user1227445 - 你拯救了我的一天，因为我试图找到这个问题的解决方案已经将近一个小时了。对您的回答稍作更新，appsettings.Development.json 中的设置现在称为 BaseAddress 而不是 API_PREFIX以上是关于无法从 Blazor WebAssembly 应用本地访问 Azure Function Api的主要内容，如果未能解决你的问题，请参考以下文章
Blazor WebAssembly FetchData 无法在 SQL Server 上运行
C# Blazor WebAssembly：参数 2：无法从“void”转换为“Microsoft.AspNetCore.Components.EventCallback”
toDataURL() 无法在 Blazor Webassembly 中使用 JS 互操作保存 HTML5 画布的内容？
Blazor正式成为Microsoft官方.NET 和WebAssembly项目