无法使用 Blazor 客户端模板和 ASP.NET Core Web API 保存数据答案

【问题标题】：Not able to save data using Blazor client template and ASP.NET Core Web API无法使用 Blazor 客户端模板和 ASP.NET Core Web API 保存数据
【发布时间】：2019-11-30 07:58:30
【问题描述】：

我创建了一个 Blazor 客户端应用程序作为前端和 ASP.NET Core Web API 来提供数据，但我无法使用 Blazor 客户端模板保存数据。 Blazor 客户端应用无法调用 API。

但是，如果我使用 Blazor 核心托管模板，我可以保存数据。

这是代码：

// Blazor Client APP
@page "/register"
@inject HttpClient Http

@inject Microsoft.AspNetCore.Components.IUriHelper UriHelper

<h1>Create</h1>
<h3>Employee</h3>
<hr />
<div class="row">
        <div class="col-md-4">
            <form>
                <div class="form-group">
                    <label for="Name" class="control-label">Name : @emp.Name</label>
                    <input for="Name" class="form-control" @bind="@emp.Name" />
                </div>
                <div class="form-group">
                    <label asp-for="Gender" class="control-label">Gender</label>
                    <select asp-for="Gender" class="form-control" @bind="@emp.Gender">
                        <option value="">-- Select Gender --</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>
                <div class="form-group">
                    <label asp-for="Department" class="control-label">Department</label>
                    <input asp-for="Department" class="form-control" @bind="@emp.Department" />
                </div>
                <div class="form-group">
                    <label asp-for="City" class="control-label">City</label>
                    <input asp-for="City" class="form-control" @bind="@emp.City" />
                </div>
                <div class="form-group">
                    @* <button type="submit" class="btn btn-default" @onclick="@CreateEmployee">Save</button>*@


                    @*<button type="submit" class="btn btn-default" @onclick="@CreateEmployee">Create EMp</button>*@

                    <button type="submit" class="btn btn-default" @onclick="@(async () => await CreateEmployee())">Save</button>

                    @*<button type="submit" class="btn btn-default" @onclick="@CreateE">E Save</button>*@
                </div>
            </form>
        </div>
</div>

@code {
        Employee emp = new Employee();

        protected async Task CreateEmployee()
        {
            await Http.SendJsonAsync(HttpMethod.Post, "https://localhost:44364/api/User/emp", emp);
            UriHelper.NavigateTo("/register");
        }

        void cancel()
        {
            UriHelper.NavigateTo("/fetchemployee");
        }
}  

// ASP.NET Core Web API code
[HttpPost]
[Route("emp")]
public void Create(Employee emp)
{

}

【问题讨论】：

“Blazor 客户端应用程序无法调用 API。” - 请提供错误消息、详细信息和代码。
旁注，您以错误的方式使用异步。这可能是这里的原因。

标签： blazor

【解决方案1】：

这似乎是 CORS 的问题。请在运行应用程序后检查 chrome 开发工具中的控制台。您可能会收到 Failed to load <web API> : No ‘Access-Control-Allow-Origin’ header is present on the requested resource 错误。这个错误的原因是应用程序的客户端和服务器不在同一个端口上。由于同源策略，浏览器将限制应用程序进行 Web API 调用。

要解决此问题，您需要在应用程序中启用跨域请求 (CORS)。有关详细信息，请参阅https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0 的 Microsoft 文档。

【讨论】：