为什么我的 Blazor Server 应用程序不向我的 ASP.NET Core Web API 发送 HTTP 请求？

Question

我有一个 Blazor Server Web 应用程序和一个在本地主机上运行的 ASP.NET Core Web API。我正在尝试从 Web 应用程序向 API 发出 HTTP 请求，但我看不到浏览器的“网络”选项卡中发出的任何请求或来自 API 的任何响应。尽管配置了 CORS 并设置了正确的 HttpClient.BaseAddress，但请求似乎无法到达 API。

我已经尝试过：

1. WebAPI 中的 Cors 配置：

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins("http://localhost:5235")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});
app.UseCors();

2. WebApp 中的 HttpClient 配置：

builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri("http://localhost:5213/")
});

3.使用 Razor 页面测试端点：

@page "/test-api-connectivity"
@inject HttpClient HttpClient

<h3>Test API Connectivity</h3>
<button @onclick="FetchData">Test Connection</button>
<p>@responseMessage</p>

@code {
    private string responseMessage = string.Empty;

    private async Task FetchData()
    {
        try
        {
            var response = await HttpClient.GetAsync("api/locations");
            responseMessage = response.IsSuccessStatusCode
                ? "Connection successful!"
                : $"Connection failed: {response.StatusCode}";
        }
        catch (Exception ex)
        {
            responseMessage = $"Error: {ex.Message}";
        }
    }
}

使用 Swagger 和 Postman 进行测试：

• 该 API 与 Postman 和 Swagger 配合良好。
• 端点

  /api/locations

  在 Postman 中返回 17,820 行，因此 API 可以正常工作。

浏览器调试：

• 单击“测试连接”按钮时，我在浏览器的“网络”选项卡中没有看到任何传出请求。
• 浏览器控制台中没有出现错误。

当单击测试页面上的按钮（

TestApiConnectivity

或

Locations

）时，我希望浏览器向http://localhost:5213/api/locations发送

GET

请求并返回响应。 由于浏览器的“网络”和“控制台”选项卡中看不到任何 HTTP 请求，因此故障排除一直令人沮丧。 API 不会记录任何收到的请求。最后，Blazor 页面不会随响应更新。

问题：

什么可能会阻止我的 Blazor Server Web 应用程序向 API 发送 HTTP 请求，即使：

• CORS 已配置，
• API 可与 Postman 和 Swagger 配合使用，
• HttpClient.BaseAddress 设置正确吗？

Answer 1

您一定错过了指示

@renderMode

，因为您已经标记了 blazor-server-side，所以您需要包含

InteractiveServer

。

默认情况下，如果您没有全局指定渲染模式，它会静态渲染。

@rendermode InteractiveServer
@page "/test-api-connectivity"
@inject HttpClient HttpClient

<h3>Test API Connectivity</h3>
<button @onclick="FetchData">Test Connection</button>
<p>@responseMessage</p>

@code {
    private string responseMessage = string.Empty;

    private async Task FetchData()
    {
        try
        {
            var response = await HttpClient.GetAsync("api/locations");
            responseMessage = response.IsSuccessStatusCode
                ? "Connection successful!"
                : $"Connection failed: {response.StatusCode}";
        }
        catch (Exception ex)
        {
            responseMessage = $"Error: {ex.Message}";
        }
    }
}