无法从 Blazor WebAssembly 应用本地访问 Azure Function Api
Can't access Azure Function Api locally from Blazor WebAssembly app
我在 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”只是 returns 以下内容。
<!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，但带有“发生未处理的错误”。您通常会在页面底部看到的消息以及重新加载 link。然而这并没有发生，我只是得到 HTML 来代替它。很明显出了点问题，并且没有显示错误。
另外，查看浏览器控制台日志也没有报错，很奇怪。通常当收到这样的错误时，浏览器日志中会有一些东西。
如果我将代码中的 Api 调用更改为以下内容，则它可以正常工作。
string test = await Http.GetStringAsync("http://localhost:7071/api/Test");
显然我不能保持这样，因为在发布到实时站点之前我必须更改每个回电。然而，这表明它正在工作，客户端只是因为某种原因只使用“api/Test”时看不到 api。
我在文档中看不到任何我遗漏的内容。为什么文档说它应该工作但不适合我？我可能缺少什么？
因此，在将我的代码与 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) });
令人沮丧的是，文档完全忽略了这一点，并且没有说明这是必要的步骤。
我将此张贴在这里以防其他人遇到同样的问题。
我在 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”只是 returns 以下内容。
<!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，但带有“发生未处理的错误”。您通常会在页面底部看到的消息以及重新加载 link。然而这并没有发生，我只是得到 HTML 来代替它。很明显出了点问题，并且没有显示错误。
另外，查看浏览器控制台日志也没有报错，很奇怪。通常当收到这样的错误时，浏览器日志中会有一些东西。
如果我将代码中的 Api 调用更改为以下内容，则它可以正常工作。
string test = await Http.GetStringAsync("http://localhost:7071/api/Test");
显然我不能保持这样，因为在发布到实时站点之前我必须更改每个回电。然而，这表明它正在工作，客户端只是因为某种原因只使用“api/Test”时看不到 api。
我在文档中看不到任何我遗漏的内容。为什么文档说它应该工作但不适合我？我可能缺少什么？
因此，在将我的代码与 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) });
令人沮丧的是，文档完全忽略了这一点，并且没有说明这是必要的步骤。
我将此张贴在这里以防其他人遇到同样的问题。