HTTP拦截器使用Angular 2,4,6,7,8,9 TypeScript在失败的请求上获得状态0

Question

我有以下 HTTP 拦截器的实现Angular ^4.3.6。

import {Injectable} from "@angular/core";
import {
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpEvent,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import "rxjs/add/operator/do";

@Injectable()
export class InterceptorService implements HttpInterceptor {

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {
    return next.handle(req).do(evt => {
      console.log(evt);//this logs the success message properly
      if (evt instanceof HttpResponse) {
        //Keep going
      }
    },err => {
    console.log(err);
    //this logs the error but don't have useful info in it.
    });

}
}

在成功的 http 调用中，我得到以下成员，evt这些成员在第一个 console.log 上是有效的。

ok:true
status:200
statusText:"OK"
type:4 

]

但是在失败时，我err在第二个 console.log 上的块中没有正确的状态代码，但在 ZONE.js 的 DEV 控制台中有以下消息

zone.js:2263 选项http://localhost:7001/coreRobo/neuralProcess 404（未找到）

name:"HttpErrorResponse"
ok:false
status:0
statusText:"Unknown Error" 

我不确定我在这里缺少什么，但我希望该状态能够给我一些有效的东西，例如 404,403 或见鬼的 500，而这显然是正在发生的事情。

我只是想要这些值，以便我可以向 UI 显示正确的消息，并帮助客户端不会因失败而恐慌。

欢迎任何帮助。提前致谢。

Answer 1

如果您使用CORS，您应该在服务器配置中检查“ Access-Control-Allow-Origin ”。

我在我的nginx服务器上解决了这个问题，添加：

add_header "Access-Control-Allow-Origin" * always;

我错过了“ always ”参数，它导致我遇到和你一样的问题。

在我的示例中，您应该注意标题“*”的值。

该值必须包含允许来源的列表。