Blazor 项目的 httpClient 不向 WebApi 项目发送请求答案

【问题标题】：Blazor project's httpClient does not send request to WebApi projectBlazor 项目的 httpClient 不向 WebApi 项目发送请求
【发布时间】：2020-12-01 00:07:37
【问题描述】：

我创建了一个自定义解决方案，其中包含一个 Blazor 项目、两个类库和一个 WebApi 项目，我为 blazor 和 api 项目配置了两个不同的端口（因为不可能使用一个端口），api 应用程序 url 是：http ://localhost:36855/，我将工作的 blazor wasm（解决方案中 3 个项目的标准 Microsoft 模板）文件复制到这些项目中，我希望它们能够工作，Api 项目运行，我可以用邮递员测试它的操作方法， Blazor 项目也可以运行，但无法向 webapi 项目发送请求，例如在我的登录页面中：

private async void HandleValidSubmit()
{        
    AjaxLoading = true;
    DisableLoginButton = true;
    ReturnModel = await genericService.PostModelAsyncOld<LoginModel>("api/Account/Login", Model);
    ...
}

通用服务是一个 httpclient 注入到它的类，它的任务是与服务器和 Get 和 Post 方法联系（它在我在这里复制的项目中工作）：

public class GenericService : IGenericService
{
    private HttpClient httpClient;
    public GenericService(HttpClient httpClient)
    {
        this.httpClient = httpClient;
        //this.httpClient.BaseAddress = new Uri("http://localhost:36855/");
    }

    public async Task<AsyncReturn<TModel>> PostModelAsyncOld<TModel>(string uri, TModel model)
    {
        TModel returnModel = default(TModel);
        
        HttpResponseMessage result =
            await httpClient.PostAsync(uri, new StringContent(JsonConvert.SerializeObject(model), Encoding.UTF8, "application/json"));                                                     
        if (result.IsSuccessStatusCode)
        {                
            returnModel = JsonConvert.DeserializeObject<TModel>(result.Content.ReadAsStringAsync().Result);                ;                
            return new AsyncReturn<TModel>()
            { AsyncSuccess = true, Model = returnModel, StatusCode = System.Net.HttpStatusCode.OK };
        }
        else
        {                
            return new AsyncReturn<TModel>()
            { AsyncSuccess = false, Model = default(TModel), StatusCode = result.StatusCode };
        }

    }
 }

api 控制器和操作方法（仅适用于 PostMan 而不是 HttpClient）：

[ApiController]
[Route("api/[controller]")]   
public class AccountController : Controller
{
    .... 
    // inject services and other methods 
    ....

    [HttpPost]
    [Route("Login")]
    public async Task<LoginModel> Login(LoginModel model)    //, string returnUrl, string culture)
    {
        if (ModelState.IsValid) // **Breakpoint here, only hits with PostMan not by Blazor App**
        {
          ....

我也去了program.cs并做了这个改变：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");
        
        // The following line is the change:
        builder.Services.AddSingleton(sp => new HttpClient() { BaseAddress = new Uri("http://localhost:36855/") });           //builder.HostEnvironment.BaseAddress) });

        builder.Services              
          .AddHttpContextAccessor()
          .AddScoped<HttpContextAccessor>()
          .AddSingleton<ITokenService, TokenService>()
          .AddSingleton<IGenericService, GenericService>()
          .AddSingleton<ViewDataService>()              
          .AddBlazoredSessionStorage();

我尽一切努力完成这项工作，但没有成功，这里有什么问题？

【问题讨论】：

如果您能告诉我们错误是什么，是 http 错误还是执行，会很有帮助吗？
我不能立即看到任何明显的东西，但我要做的第一件事是在通用服务代码中添加一个断点并检查 httpClient 是否具有您期望的所有设置。像基本 URL/安全标头等一样，通常还有“PostAsJsonAsync”和“ReadAsAsync”的扩展方法，它们处理所有内容类型设置以及检查和反序列化。可能值得尝试使用这些来确保不会因为对象发送不正确而错过端点。
从您的描述看来，您现在有 2 个 Web API（1 个独立的，1 个来自 Wasm/Hosted）。这是你想要的吗？
36855 端口上的服务器可能应该启用 CORS。
是的 CORS 是问题，我添加了 services.AddCors();和 app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());启动，现在它可以工作了。

标签： asp.net-web-api blazor-client-side blazor-webassembly

【解决方案1】：

在通过 F12 看到 Blazor 错误消息后，我意识到是 CORS 导致了这个问题，所以我在 ConfigureServices 和启动文件中的 Configure 方法中添加了这几行代码，解决了这个问题：

services.AddCors();

app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());

【讨论】：