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

Posted 2023-03-04

【中文标题】“（未知 url）的 Http 失败响应：0 未知错误”而不是 Angular 中的实际错误消息

【英文标题】：“Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in 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;
        
    

可能是什么问题？

【参考方案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找到