Проблема Angular CORS - Опрос конечной точки каждые 5 секунд

Question

У меня есть угловое приложение, которое запрашивает конечную точку узла / экспресс-сервера каждые 5 секунд. Тем не менее, иногда я получаю ошибку Cors.

USECASE

1. Пользователь создает транзакцию. Транзакция добавляется в базу данных со статусом "Ожидание"
2. Интерфейс периодически запрашивает базу данных, пока статус не будет обновлен до "Завершено". Таким образом, он может получить результаты.

угловатый

Каждые 5 секунд я делаю http запрос на получение

   const url = 'https://<removed>.com/api/v1/transactions/' + transactionId;

    interval(5000)
        .pipe(
            switchMap(() => this.httpClient.get(url)),
            tap((response: any) => {
                this.summary = response;
            }),
            takeWhile((response: any) => response.data['status'] !== 'Completed'),
    ).subscribe();

}

Первый запрос в порядке, затем я получаю следующую ошибку при следующем запросе.

Не удалось загрузить https://"".com/api/v1/ Transactions/f3debad2-a830-4168-9a03-475389dae7e0: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник ' http://localhost:4200/', следовательно, не имеет доступа. Ответ имел HTTP-код состояния 502.

Блокировка перекрестного чтения (CORB) заблокировала ответ перекрестного происхождения https://"".com/api/v1/ Transactions / f3debad2-a830-4168-9a03-475389dae7e0 с типом MIME text/html. См. https://www.chromestatus.com/feature/5629709824032768 для получения дополнительной информации.

Опять же, это случается иногда, иногда я могу сделать столько запросов, сколько захочу, с 200 ответами.

Узел

Я установил CORS в своем бэкэнде.

  app.use(cors());

Заметка

Я не уверен, что это полная проблема на стороне сервера. Это случайный крайний случай. Все мои другие запросы API, включая запросы POST, работают нормально.

Фактически, прежде чем запустить интервал в 5 секунд, чтобы проверить, готовы ли результаты, он отправляет сообщения в конечную точку в том же домене без проблем.

Я сделал 10 тестовых случаев, каждый тест будет запрашивать конечную точку 3-4 раза (обычно это занимает много времени, прежде чем результаты будут готовы / завершены). Все 10 тестов могут быть в порядке, тогда как 11-й может иметь эту проблему.

Answer 1

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

Сначала я подумал, что это тоже проблемы с CORS, после того, как я увидел потерю заголовков во втором вызове и тег "keep-alive" в заголовках, я не нашел ничего о своем обещании, поэтому я пытаюсь закрыть автоматический keep-alive ', ожидая несколько раз.

Я не использую takeWhile для создания цикла. Я предпочитаю цикл for, потому что в нем можно использовать функцию ожидания.

for(const list of lists){
    await this.httpClient.get(url).toPromise();
    await this.delay(500);
}

delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
}

Я пробую 100 и 200 мс, но у меня это не работает.

Надеюсь, это вам поможет.

Answer 2

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Expose-Headers','Content-Type,expire');
 next();
});

Попробуйте это на своем сервере. Если вы хотите передать дополнительный параметр заголовка, вам нужно добавить эти переменные в res.setHeader('Access-Control-Allow-Headers', 'Content-Type , token'); но помните, не используйте '-' в имени переменной.