Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting 'TypeError: Failed to fetch' error when trying to call AspNetCore Restful API from Blazor Wasm

I'm getting a 'TypeError: Failed to fetch' error when trying to call my AspNetCore Restful API from Blazor Wasm. I can call it from Postman, and it works fine.

My Environment: Microsoft Visual Studio Community 2019 Preview Version 16.6.0 Preview 3.0

Client: Blazor Wasm Service (dotnetstandard 2.1)

  • AspNet.WebApi.Client 5.2.7
  • AspNetCore..WebAssembly 3.2 preview 4.2
  • System.Net.Http.Json 3.2 preview 5.2

Important Usings:

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

Parent namespace and class omitted _httpClient is injected into parent class

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;
}

My API (.Net 5.0, also tried .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();
}
like image 525
inliner49er Avatar asked Apr 19 '20 20:04

inliner49er


People also ask

How do you fix TypeError failed to fetch?

To solve the "TypeError: Failed to fetch", make sure to pass the correct configuration to the fetch method, including the URL, HTTP method and headers, and verify that the server you're making a request to is setting the correct CORS headers with the response.

What is failed fetch error?

When you see an error saying "Failed to fetch" or get an ICE error this means that there is a connectivity issue between you and Lookback. Typically this is related to a firewall blocking your connection in some way.

Does Blazor WebAssembly use SignalR?

Blazor Server. With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.


2 Answers

@inliner49er, I wish that I could add a comment to clarify what you responded, since your answer is correct, but I don't have enough reputation points. Therefore, I'll post my tweaks to your answer as a separate answer.

You nailed it, the CORS issue fixed my program also. The only part of your code that didn't make sense was the reference that you have to a class called Constants. I am in the process of trying to complete the PluralSight tutorial, and because I'm working entirely internally, I can safely replace your code with the following:

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

I am super new to all of this, literally hours into the process of learning about it, so there is a buttload that I don't understand. I just thought I'd post this to help anyone who might have similar questions to what I had.

like image 23
Nate W Avatar answered Sep 17 '22 14:09

Nate W


What a misleading error message. It was a CORS issue.

The fix was adding "PATCH" to my CORS policy in my API's startup.cs ConfigureServices method (which previously was "GET, DELETE, PUT, POST, OPTIONS").

services.AddCors(options =>
{
    options.AddPolicy(CorsAllowAll,
    builder =>
    {
            builder.WithOrigins(Constants.ApiClientCors).AllowAnyHeader().WithMethods("GET, PATCH, DELETE, PUT, POST, OPTIONS");
    });  
});
like image 64
inliner49er Avatar answered Sep 21 '22 14:09

inliner49er