How can I avoid intermittent Cors errors with Axios and Vue.js requests?

Asked

Viewed 25 times

-1

I have an application developed in Vue.js that performs requests through Axios for an api developed in Node.js with express. My problem is that in 3% of requests CORS is blocked by locking the application. Does anyone know how to avoid this error?

Obs1. Analyzing the headers of the requests with error. Returns only a Network Error,

Follow the request header

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

Follow the error shown in the 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. The error can occur in any application request at random, most of the time the request works normally, the error is only in a few requests. What leads me to believe that the problem is not with the code of the Node.js api with express that is properly configuring with the npm Cors library.

Note 3. The application is hosted on AWS. The S3 front with Cloudfront distribution and the backend in a Lightsail instance. Problem in Cloudfront distribution is not, that the error occurs also with tests on the localhost performed the request.

Thank you for your attention.

1 answer

0

After correcting the code and verify that exactly same error occurred turning off the wifi, also the ping of the local connection, I found that in some moments the local network presented intermittences, what makes the address respond with connection error in a few moments.

To get around the problem I set the 15sec timeout for all requests with Axios, I treated the error properly and adjusted the load with the Nprogress library. Now the system is okay.

I found very strange little literature about the problem both in national and international forums, which before finding the problem made me even reconfigure the service in other servers.

But in the end it worked!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.