The provided ContentType is not supported; the supported types are 'application/json' in blazor

Question

I am calling a blazor serverapp(webwebapi) in blazor webassemblyapp(client side) but I am facing content type error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The provided ContentType is not supported; the supported types are 'application/json' and the structured syntax suffix 'application/+json'.
System.NotSupportedException: The provided ContentType is not supported; the supported types are 'application/json' and the structured syntax suffix 'application/+json'.
  at System.Net.Http.Json.HttpContentJsonExtensions.ValidateContent (System.Net.Http.HttpContent content) <0x32571f8 + 0x0009a> in <filename unknown>:0 
  at System.Net.Http.Json.HttpContentJsonExtensions.ReadFromJsonAsync[T] (System.Net.Http.HttpContent content, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) <0x3256ff0 + 0x00006> in <filename unknown>:0 
  at System.Net.Http.Json.HttpClientJsonExtensions.GetFromJsonAsyncCore[T] (System.Threading.Tasks.Task`1[TResult] taskResponse, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) <0x321fd50 + 0x0011c> in <filename unknown>:0 
  at CrudBlazorClientApp.Pages.Index.Login () [0x00106] in C:\Users\FrontTech\source\repos\CrudBlazorServerApp\CrudBlazorClientApp\Pages\Index.razor:31 
  at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion (System.Threading.Tasks.Task task) <0x3220cb0 + 0x000da> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x3156c98 + 0x000b6> in <filename unknown>:0 

EmpsController.cs

namespace CrudBlazorServerApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmpsController : ControllerBase
    {
        //here I create a custom login webapi 
        [HttpPost]
        [Consumes("application/json")]
        public Emp checkLogin(string username, string password)
        {
            Emp hasemp = _context.emps.Where(e => e.username == username & e.password == password).FirstOrDefault();
            return hasemp;
        }

see above webapi response

see watch window

see console log

Request Header

Response

failed to load response data

Index.razor

@page "/"
@using CrudBlazorServerApp.Data
@inject HttpClient Http
@inject NavigationManager navigationManager
@*@inject CrudBlazorServerApp.Data.sqldbcontext _sqldbcontext*@
@using Newtonsoft.Json;
<div>
    UserName:<input id="txtusername" type="text" placeholder="Enter Your UserName" @bind="@username" /><br />
    Password:<input id="txtpassword" type="text" placeholder="Enter Your Password" @bind="@password" /><br />
    <button @onclick="Login">Log In</button>
</div>

@code{
    string username = "";
    string password = "";
    Emp empList = new Emp();
    protected async Task Login()
    {
        @if (username == "" || username == null && password == "" || password == null)
        {
            var data = new
            {
                message = "Enter Username ",
            };
        }
        else
        {
            var client = new HttpClient();
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Add("Accept", "application/json");
            empList = await client.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/checkLogin?username=" + empList.username + "&password=" + empList.password);

            @if (username == empList.username || password == empList.password)
            {
                var data = new
                {
                    message = "Success",
                    data = new { empList.username, empList.password }
                };

                navigationManager.NavigateTo("/registration");

            }
            else
            {
                var data = new
                {
                    message = "Username and Password incorrect ",
                };
                navigationManager.NavigateTo("/index");
            }
        }
    }
}

when I am debugging this line generate an error:

empList = await client.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/checkLogin?username=" + empList.username + "&password=" + empList.password);

and emplist is also null

help

Answer 1

There seems to be a couple of issues here.

1. The method you are trying to reach is a POST

[HttpPost]
[Consumes("application/json")]
public Emp checkLogin(string username, string password)

In your client side code, your are using

await client.GetFromJsonAsync<Emp>(".....")

That method is making a GET request, not a POST request. It seems to me that the method you want is PostAsJsonAsync

2. The endpoint seems to be incorrect. In Postman, the URL you are invoking and is working (with a POST request) is https://localhost:44333/api/emps?username=...., in your C# code it is https://localhost:44333/api/emps/checkLogin?username=....

3. (This is what your code is complaining about) The error you are getting is because HTTP header Content-Type is not application/json. You might need to specify this header:

client.DefaultRequestHeaders.Add("Content-Type", "application/json");

4. This is not causing server error, but you might want to consider not passing credentials as query strings even if your application runs on HTTPS. This question has good answers related to this topic.

Answer 2

I think you need to change this line:

empList = await client.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/checkLogin?username=" + empList.username + "&password=" + empList.password);

To

empList = await client.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/checkLogin?username=" + username + "&password=" + password);