无法从 Blazor WebAssembly 应用本地访问 Azure Function Api答案

【问题标题】：Can't access Azure Function Api locally from Blazor WebAssembly app无法从 Blazor WebAssembly 应用本地访问 Azure Function Api
【发布时间】：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 文档没有显示完整的图片。所以我实际上错过了一些东西。

标签： .net azure azure-functions blazor webassembly

【解决方案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