“（未知URL）的HTTP错误响应：0未知错误”，而不是Angular中的实际错误消息

Question

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

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

已从CORS策略阻止从原点[http://localhost:64458/api/employee/insert'从'http://localhost:4200'访问XMLHttpRequest：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。

core.js：15724错误HttpErrorResponse {headers：HttpHeaders，状态：0，statusText：“未知错误”，URL：“ http://localhost:64458/api/employee/insert”，确定：false，...}

这是我的角度服务代码：

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

这是我的网络api代码：

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

可能是什么问题？

Answer 1

首先在Package Manager控制台窗口中，键入以下命令

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

希望这会对您有所帮助。

Answer 2

//添加startup.cs的ConfigureServices方法

 services.AddCors();

//在startup.cs的Configure方法中]

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