Question

我正在学习Angular [6]，虽然我对Observables不太了解，但我觉得至少已经建立了一个可用的示例。但是，我遇到了一个始终如一的问题，使我相信我使用的方法不佳或从根本上误解了某些东西。

在我的ApiService中：

 getTransaction(uid:number):Observable<Transaction[]>{
   let url = this.endPoint + '/transaction';
   if(uid !== undefined){
     url += '/' + uid;
   }
   return this._httpRequest('GET',url,this._buildAuthHeader(),null).map((response)=>{
     if(response['body'] && uid === undefined){
       return <any>response['body'].map((transaction)=>{return new Transaction(transaction);});
     }else if(response['body']){
       return new Transaction(response.body);
     }
   });
 }

然后在我的BuddyService中实现：

  constructor(private ApiService:ApiService,private cookie:CookieService) {
    this.checkCookie();
  }
  authenticate(username,password):void{
    this.ApiService.authenticate(username,password).subscribe((response)=>{
      if(!response['error']){
        this.ApiService.token = response.token;
        this.cookie.set('auth_token',this.ApiService.token);
        this.checkCookie();
      }else{
        console.log(response);
      }
    });
  }
  checkCookie():void{
    if(this.cookie.check('auth_token')){
      this.ApiService.token = this.cookie.get('auth_token');
      this.ApiService.verifyToken().subscribe((response)=>{
        if(!response['error']){
          this.init();
        }else{
          // console.log(response);
        }
      });
    }
  }
  init():void{
    this.ApiService.getTransaction(undefined).subscribe((data)=>{console.log(data);this.transactions = data;});
  }

在提供此服务并加载页面后，所有功能都会按预期运行。除了对API的每次调用实际上是2次调用，然后是OPTIONS请求，然后是我的实际请求，在上面的示例中导致this.transactions在填充之前始终是未定义的。我在这里做错了什么？我该如何订阅真实请求而不是OPTIONS请求的结果？

提前感谢！

编辑：

 getTransaction(uid:number):Observable<Transaction[]>{
   let url = this.endPoint + '/transaction';
   if(uid !== undefined){
     url += '/' + uid;
   }
   let req = new HttpRequest(
     'GET',
     url,
     {
       headers:new HttpHeaders({'auth_token':this.token});
     }
   );
   return this.http.request(req).map((response)=>{
     console.log(response);
   });
 }

在我的问题精简到更加准系统之后，我仍然看到相同的结果。 console.log(response);首先在预检时渲染{type:0}，然后在真实请求时渲染HttpResponse。

我觉得这个问题必须影响所有提出跨域请求的人？

Answer 1

OPTIONS请求是CORS

的飞行前请求

Angular HTTP流双重请求[GET，HEAD]

1 个答案: