尝试从 Blazor Wasm 调用 AspNetCore Restful API 时出现“TypeError: Failed to fetch”错误

Question

尝试从 Blazor Wasm 调用我的 AspNetCore Restful API 时，出现“TypeError: Failed to fetch”错误。我可以从邮递员那里调用它，它工作正常。

我的环境： Microsoft Visual Studio Community 2019 Preview Version 16.6.0 Preview 3.0

客户端：Blazor Wasm 服务（dotnetstandard 2.1）

• AspNet.WebApi.Client 5.2.7
• AspNetCore..WebAssembly 3.2 预览版 4.2
• System.Net.Http.Json 3.2 预览版 5.2

重要用途：

using Microsoft.AspNetCore.JsonPatch;
using Newtonsoft.Json;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Net.Http.Json;

父命名空间和类省略 _httpClient 注入父类

public async Task<MyDto> UpdatePartialAsync(Guid primaryId, ObjectForUpdateDto objectForUpdateDto)
{

    MyDto dtoFromApi = null;

    var patchDoc = new JsonPatchDocument<ObjectForUpdateDto>()
        .Replace(o => o.Name, objectForUpdateDto.Name)
        .Replace(o => o.Description, objectForUpdateDto.Description)

    var uri = $"MyUri/myResources/{primaryId}";

    try
    {
        _httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

        var serializedPatchDoc = JsonConvert.SerializeObject(patchDoc);
        var json = new StringContent(serializedPatchDoc, Encoding.UTF8, "application/json-patch+json");

        var response = await _httpClient.PatchAsync(uri, json);
        return await response.Content.ReadAsAsync<MyDto>();
    }
    catch (Exception)
    {   
        throw; //throws 'TypeError: Failed to fetch'
    }

    return dtoFromApi;
}

我的 API（.Net 5.0，也尝试过 .Net Core 3.1）：

[HttpPatch]
[Route("{primaryId}")]
public ActionResult UpsertPartial([FromRoute]Guid primaryId, [FromBody] JsonPatchDocument<ObjectForUpdateDto> objectForUpdateDto)
{
    //client call never makes it here
    return NoContent();
}

Answer 1

多么误导性的错误信息。这是一个 CORS 问题。

修复是"PATCH"在我的 API 的 startup.csConfigureServices方法（以前是"GET, DELETE, PUT, POST, OPTIONS"）中添加到我的 CORS 策略中。

services.AddCors(options =>
{
    options.AddPolicy(CorsAllowAll,
    builder =>
    {
            builder.WithOrigins(Constants.ApiClientCors).AllowAnyHeader().WithMethods("GET, PATCH, DELETE, PUT, POST, OPTIONS");
    });  
});

Answer 2

@inliner49er，我希望我可以添加一条评论来澄清您的回复，因为您的答案是正确的，但我没有足够的声誉点。因此，我会将我对您答案的调整作为单独的答案发布。

你成功了，CORS 问题也修复了我的程序。代码中唯一没有意义的部分是对名为 的类的引用Constants。我正在尝试完成PluralSight教程，并且因为我完全在内部工作，所以我可以安全地将您的代码替换为以下内容：

services.AddCors(options =>
{
    options.AddPolicy("PolicyName", builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
});

我对这一切都非常陌生，实际上花了几个小时来学习它，所以有一个我不明白的问题。我只是想发布这篇文章来帮助那些可能有与我类似问题的人。