title: Getting CORS response from server but only for one api call out of two
body: <p><strong>Summery of the problem:</strong></p>
  
  <p>I am stuck in a strange issue where I am making two calls to the same API, one gets successful and another is returning <code>504</code>. </p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at
    '<a href="https://ocr.mywebsite.ai/tesseract/basic/" rel="nofollow noreferrer">https://ocr.mywebsite.ai/tesseract/basic/</a>' from origin
    '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' has been blocked by CORS policy: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource.</p>
  </blockquote>
  
  <hr>
  
  <p><strong>Detailed Problem</strong></p>
  
  <p>I have one api which accepts image as <code>blob</code> and responds with parsed json. I have two images, so I call the api twice using Promise.all() as follows:</p>
  
  <pre><code>let ocrPromises = id_card_images.map((image, index) =&gt; {
                  let header: IHeadersData = {};
                  header = index === 0 ? {card_side: "front"} : {card_side: "back"};
                  return this.parseImageUsingOCR(image, header)//makes http call and return promise
              });
  let ocrData = await Promise.all(ocrPromises);
  </code></pre>
  
  <p>One of these requests gives back <code>200</code> response right away while another one fails after above 5 sec with code <code>504</code>. Could anyone suggest what could be the possible reason for such behavior?</p>
  
  <p>Following the chrome network panel. First is failed request second is passed request.
  <a href="https://i.stack.imgur.com/2KP9l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2KP9l.png" alt="failed Request"></a>
  <a href="https://i.stack.imgur.com/IIExB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IIExB.png" alt="passed Request"></a></p>
  
  <p><hr>
  <strong>parseImageUsingOCR</strong> method which makes actual server call (this is a bit of angular 7 code)</p>
  
  <pre><code>parseImageUsingOCR(image, header: IHeadersData): Promise&lt;{ parsed_data: any, s3_url: string }&gt; {
  
  
          let blob = UtilityService.dataURItoBlob(image);
          let transliterationUrl = ConstantService.getTransliterationUrl();
          let formData: FormData = new FormData();
          formData.append('image', blob);
          let userData = StoreService.getUserData();
          let transliterationHeader: IHeadersData = UtilityService.getHeaderForOCRParseByCountryAndIdType(
              userData.country,
              userData.id_card_type
          );
          transliterationHeader = {
              ...transliterationHeader,
              img_type: 'id_card',
              ...header,
              // "content-type": "application/json"
          };
  
          return new Promise((resolve, reject) =&gt; {
              // alert(JSON.stringify(transliterationHeader));
              this.serverService.makePostRequest({url: transliterationUrl, body: formData, header: transliterationHeader})
                  .subscribe((val: { parsed_data: IUser, raw_data: string, s3_url: string }) =&gt; {
                      if (val.parsed_data) {
                          resolve({
                              parsed_data: this.removeAllUndefinedFieldsFromObject(val.parsed_data),
                              s3_url: val.s3_url
                          })
                      } else {
                          resolve({parsed_data: {}, s3_url: val.s3_url});
                      }
                  })
          })
      }
  </code></pre>