Angular HTTP Client - 2次调用每个PUT / POST而不是GET

时间:2017-09-06 14:11:36

标签: angular rxjs

每当我发一个帖子或帖子时,我都会看到两个电话:

  1. 请求方法:选项|状态代码:200
  2. 请求方法:POST |状态代码:201
  3. 对于GET,我只看到一个电话:

    1. 请求方法:GET |状态代码:200
    2. 我对PUT或POST的实施

      constructor(
       private http: HttpClient   
      ) {}    
      
      postShortForm(shortForm: any) {
      const req = new HttpRequest('POST', this.preCheckUrl, shortForm, {
        reportProgress: true,
      });
      return this.http.request(req)
        .retry(3)
      }
      

      GET

      constructor(
       private http: HttpClient    
      ) {}    
      
      getApplication(id: any){
      interface ItemsResponse {
        results: string[];
      }
      return this.http
        .get<ItemsResponse>(this.applicationSubmitUrl+this.id.id, {observe: 'response'})
      }
      

      有角度做一些事情在引擎盖下做出选项请求还是在我的代码中触发它?

2 个答案:

答案 0 :(得分:2)

根据HttpClient文档,post方法使用代码可观察并将进行2次调用。以下是HttpClient文档

中的注释
  

请注意subscribe()方法。所有Observable都从HttpClient返回   很冷,也就是说它们是制作的蓝图   要求。在调用subscribe()和每个调用之前,什么都不会发生   这样的电话会发出单独的请求。例如,此代码发送一个   具有相同数据的POST请求两次:

查看详情angular HttpClient

答案 1 :(得分:1)

我认为它是因为CORS,就像请求是在站点A(localhost:4200或192.168.1.1:9002)到站点B(192.168.1.1:9000)

第一个请求是飞行前检查,以查看是否允许客户端发出请求(例如,在服务器中的php代码中,它得到类似的东西,表示允许CORS类型的请求)

<?php
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
  header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS');
  ....
?>

第一个请求是OPTIONS类型,第二个请求是实际请求,键入GET或POST。

enter image description here

enter image description here