Tenho uma aplicação desenvolvida em Vue.js que realiza requisições através do axios para uma api desenvolvida em Node.js com express. Meu problema é que em 3% das requisições o CORS é bloqueado travando a aplicação. Alguém sabe como evitar esse erro?
Obs1. Analizando os headers das requisições com erro. Retorna apenas um Network Error,
Segue o header da requisição
OPTIONS /coleta undefined
Host: xxx.xxxxxx.xxx
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Accept: */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Referer: https://xxx.xxxxxxx.xxx/
Origin: https://xxx.xxxxxx.xxx
Connection: keep-alive
Segue o erro apresentado no console:
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxx.xxxxxx.xxxx/xxxxxxxx. (Reason: CORS request did not succeed).
Uncaught (in promise) Error: Network Error
exports createError.js:16
onerror xhr.js:84
createError.js:16
Obs2. O erro pode ocorrer em qualquer requisição da aplicação de forma aleatória, na maioria das vezes a requisição funcionam normalmente, o erro é apenas em algumas poucas requisições. O que me leva a crer que o problema não é com o código da api Node.js com express que está devidamente configurando com a biblioteca npm cors.
Obs3. A aplicação esta hospedada na AWS. O front no S3 com distribuição do CloudFront e o backend em uma instância do LightSail. Problema na distribuição do CloudFront não é, que o erro ocorre também com os testes no localhost realizado a requisição.
Agradeço a atenção.