收到的 HTTP 响应 error.status 为 0 但不是实际状态

Question

我正在尝试在进行服务调用时处理 Angular 4 代码中的错误。我的要求是根据错误代码（如 403、200 或其他）执行一些操作。

我正在订阅 Observable 以获取服务调用的结果。但每次我尝试读取错误代码时，我在错误响应中只看到“0”。

getStatus():Observable<any>{
    let options = new RequestOptions({ headers: this.Headers });
    return this.http.get(this.Url,options)
      .map((res) => res.json())
      .catch((err:Response) => {return Observable.throw(err.json())})
  }

此调用后，当我尝试捕获从服务返回的错误时，我只得到“0”作为状态代码，而不是实际的状态代码。但是在浏览器控制台中我看到了实际状态。

this.service.getStatus()
      .subscribe((status => {
        this.status = status.Status;
        this.toggleflag = (this.status === 'Yes' ? true : false);
      }
    ))
    .catch(error=> this.redirectToLoginPage(error));

现在在重定向函数中，当我尝试读取状态代码时，我总是得到 0，而不是调用失败的实际状态。

private redirectToLoginPage(error) {

    if(error.message == 403){
      localStorage.clear();

      this.router.navigateByUrl('https://' + window.location.hostname);
// the code continues

我已经为此苦苦挣扎了很长时间，非常感谢任何帮助。提前致谢。

这是捕获的响应

Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, …}
headers
:
Headers {_headers: Map(0), _normalizedNames: Map(0)}
ok
:
false
status
:
0
statusText
:
""
type
:
3
url
:
null

Answer 1

您需要发送带有选项的请求：

{observe:'response'} 为了获得完整的响应 headers 和暴露的状态代码

Answer 2

我发现了问题。当我运行我本地机器上的代码时，它总是 returns 状态代码 '0'。当代码部署到我的云服务器上时，我能够导出所有正确的状态码并进行相应的错误处理。

Answer 3

我找到了导致问题的原因。这是一个服务器端问题。您需要先设置 CORS 中间件，然后再设置剩余的 API 个中间件。

请注意我正在使用 Laravel 5.6 + Angular 5

密码错误

'api' => [ 'throttle:60,1', 'bindings', \Barryvdh\Cors\HandleCors::class, ],

当前代码

'api' => [ \Barryvdh\Cors\HandleCors::class, 'throttle:60,1', 'bindings' ],

Answer 4

我在基于 Angular 和 Asp.Net 核心的水疗项目中遇到了同样的问题。

此问题是由于客户端从服务器收到的 http 响应中缺少 CORS headers。此响应违反浏览器 CORS 策略，很可能取决于服务器中未处理的运行时间错误。

即使捕获所有错误并将一些信息和 http 状态放入返回响应中，Angular，当发生 CORS 约束违规时，也不允许访问响应的任何信息，甚至是 http状态，因此它会产生 "empty" 响应：

Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, …} headers : Headers {_headers: Map(0), _normalizedNames: Map(0)} ok : false status : 0 statusText : "" type : 3 url : null..

我解决了这个问题，将 CORS headers 放入 ASp.Net Core api 服务器返回给客户端的响应中，方法如下：

   app.UseExceptionHandler(appError => {
                appError.Run(async context => {

                    var _config = ServiceProviderFactory.ServiceProvider.GetService<AppConfigurations>();

                    context.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
                    context.Response.ContentType = "application/json";
                    context.Response.Headers.Add("Access-Control-Allow-Origin", $"{_config.AngularSiteUrl}");
                    context.Response.Headers.Add("Access-Control-Allow-Headers", "access-control-allow-origin,authorization,content-type");

                    var contextFeature = context.Features.Get<IExceptionHandlerFeature>();
                    if (contextFeature != null) {

                        var ex = contextFeature.Error;

                        var sp = services.BuildServiceProvider();
                        var _logger = sp.GetService<IGenericRepository<Log>>();

                        _logger.AddAndSave(new Log {
                            Description = "Exception not handled occurred",
                            Reason = ex.ToString(),
                            Type = "Error"
                        });

                         await context.Response.WriteAsync(
                            JsonConvert.SerializeObject(new {
                            Status = context.Response.StatusCode,
                            Message = "Internal Server Error."
                        }));
                    }
                });

代码必须放在Startupclass的Configure方法中。

希望对您有所帮助。

收到的 HTTP 响应 error.status 为 0 但不是实际状态

Http response error.status received as 0 but not actual status

http-status-codes

angular2-services

angular

密码错误

当前代码