“（未知 url）的 Http 失败响应：0 未知错误”而不是 Angular 中的实际错误消息答案

【问题标题】：“Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular“（未知 url）的 Http 失败响应：0 未知错误”而不是 Angular 中的实际错误消息
【发布时间】：2022-02-16 22:30:11
【问题描述】：

我对 Angular 6 和 .NET web api 完全陌生。我正在尝试使用 HttpClient 从我的 Angular 应用程序调用 post api。但我收到 CORS 错误：

选项http://localhost:64458/api/employee/insert 404（未找到）

从源“http://localhost:4200”访问位于“http://localhost:64458/api/employee/insert”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

core.js:15724 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:64458/api/employee/insert", ok: false, ...}

这是我的角度 service.ts 代码：

url = 'http://localhost:64458/api/employee';
constructor(private http:HttpClient) {}
httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}) };  

insert(obj: any): Observable<any>{
    return this.http.post<any>(this.url + '/insert', obj,this.httpOptions).pipe(map(res => res));
}

这是我的 web api 代码：

[RoutePrefix("api/employee")]
public class HomeController : ApiController
{
    [HttpPost]
    [Route("insert")]
    public IHttpActionResult PostEmployee(dynamic data)
    {
        try
        {
            return Ok();
        }
        catch (Exception)
        {
            throw;
        }
    }
}

可能是什么问题？

【问题讨论】：

标签： angular cors http-post httpclient webapi

【解决方案1】：

//在startup.cs的ConfigureServices方法中添加

 services.AddCors();

//在startup.cs的Configure方法中

 app.UseCors(x => x
               .AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader());

【讨论】：

我正在开发 .net web api，这个答案适用于 .net core
我已经在WebApiConfig.cs 文件中添加了config.EnableCors();。

【解决方案2】：

首先在包管理器控制台窗口中，输入以下命令

Install-Package Microsoft.AspNet.WebApi.Cors

然后你可以像下面这样全局启用它

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*");
        // or new EnableCorsAttribute("www.example.com", "*", "*");
        config.EnableCors(cors);
        // ...
    }
}

更多细节可以在他们的DOC找到

【讨论】：