Получение ответа CORS от сервера, но только для одного вызова API из двух

Question

Краткое изложение проблемы:

Я застрял в странной проблеме, когда я делаю два вызова одного и того же API, один становится успешным, а другой возвращает 504.

Доступ к XMLHttpRequest по адресу 'https://ocr.mywebsite.ai/tesseract/basic/' от происхождения 'http://localhost:8080' заблокирован политикой CORS: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс.

---

Детальная задача

У меня есть один API, который принимает изображение как blob и отвечает анализом JSON. У меня есть два изображения, поэтому я вызываю API дважды с помощью Promise.all () следующим образом:

let ocrPromises = id_card_images.map((image, index) => {
                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);

Один из этих запросов сразу возвращает ответ 200, а другой отказывает через 5 секунд с кодом 504. Кто-нибудь может подсказать, что может быть причиной такого поведения?

Следуя сетевой панели Chrome. Первый - неудачный запрос, второй - пройденный запрос.

---

parseImageUsingOCR метод, который делает фактический серверный вызов (это немного угловой код 7)

parseImageUsingOCR(image, header: IHeadersData): Promise<{ parsed_data: any, s3_url: string }> {


        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) => {
            // alert(JSON.stringify(transliterationHeader));
            this.serverService.makePostRequest({url: transliterationUrl, body: formData, header: transliterationHeader})
                .subscribe((val: { parsed_data: IUser, raw_data: string, s3_url: string }) => {
                    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});
                    }
                })
        })
    }

Answer 1

Это на самом деле не проблема CORS.

Запрос, который получает ответ 200 OK, показывает наличие заголовка CORS. Отвечающий на неудачный запрос ответ не поступает с того сервера, на котором он должен отвечать, поэтому шлюз между этим сервером и вами возвращает тайм-аут шлюза (HTTP 504).

В любом случае это проблема, и тот факт, что сервер шлюза не отправляет заголовок CORS, не будет иметь большого значения. Я подозреваю, что серверу OCR потребовалось слишком много времени, чтобы ответить, и шлюз отменил запрос и вместо этого ответил тайм-аутом.

Либо увеличьте время ожидания шлюза, либо попробуйте использовать изображения меньшего размера, которые, как мы надеемся, не будут обрабатывать OCR слишком долго.