Question

我在blazor webassemblyapp（客户端）中调用blazor serverapp（webwebapi），但是我遇到内容类型错误：

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

请参阅上面的webapi响应

查看监视窗口

查看控制台日志

请求标头

响应

无法加载响应数据

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

当我调试此行时会生成错误：

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

并且emplist也为空

帮助

Answer 1

这里似乎有几个问题。

您尝试到达的方法是POST

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

在您的客户端代码中，您正在使用

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

该方法正在发出GET请求，而不是POST请求。在我看来，您想要的方法是PostAsJsonAsync

该端点似乎不正确。在Postman中，您正在调用且正在使用（带有POST请求）的URL为https://localhost:44333/api/emps?username=....，在您的C＃代码中为https://localhost:44333/api/emps/checkLogin?username=....
（这是您的代码所抱怨的）您收到的错误是因为HTTP标头Content-Type不是application/json。您可能需要指定此标头：

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

这不会引起服务器错误，但是即使您的应用程序在HTTPS上运行，您也可能要考虑不将凭据作为查询字符串传递。 This问题具有与此主题相关的良好答案。

Answer 2

我认为您需要更改此行：

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

收件人

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

提供的ContentType不支持；支持的类型是blazor中的“ application / json”

2 个答案: