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

Question

我是 Angular 6 和 .NET web api 的新手。我正在尝试使用 HttpClient 从我的 angular 应用中调用 post api。但我收到 CORS 错误：

OPTIONS http://localhost:64458/api/employee/insert 404 (Not Found)

Access to XMLHttpRequest at 'http://localhost:64458/api/employee/insert' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

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

这是我的 angular 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));
}

这是我的网站 api 代码：

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

可能是什么问题？

Answer 1

//在startup.cs

的ConfigureServices方法中添加

 services.AddCors();

//在startup.cs

的Configure方法中

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

Answer 2

首先在包管理器控制台window，键入以下命令

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

中找到更多详细信息

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

“Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular

httpclient

http-post

cors

angular

webapi