Question

我使用Angular ^4.3.6实现了HTTP拦截器。

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

但是在失败时，我没有来自第二个console.log上err块的正确状态代码，但是在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 ，则应检查＆＃34; Access-Control-Allow-Origin ＆＃34;在您的服务器配置中。

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

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

我错过了＆＃34; 总是＆＃34;引起我同样问题的参数。

你应该注意标题的价值＆＃34; *＆＃34;在我的例子中。

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

Answer 2

我发现了导致问题的原因..它是服务器方面的问题。您需要先设置CORS中间件，然后再设置剩余的API中间件。

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

错误代码

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

Currect Code

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

HTTP拦截器使用Angular 4在失败的请求中获取状态0

2 个答案:

错误代码

Currect Code