CORS problem: Laravel- Vue SPA

So I was recently working on a project where I had a Vue application on the front-end and Laravel in the backend. I was testing the API on different browsers, everything was working perfectly on chrome and when I used Firefox, CORS errors started kicking in.

I thought the problem was with Laravel and so I attempted making all kinds of changes to config/cors.php but nothing was solved. Then I saw this post https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

It mentioned that one of the possible causes of CORS requests not succeeding is when you try to access a HTTPS resource that has an invalid certificate.

Then I remembered that I was using Laragon to run my Laravel application and it creates a custom domain with SSL. My Vue app was making requests to a HTTPS that did not have a valid certificate and I think that is why it was not working.

So I changed the API URL that Vue was making requests from HTTPS to HTTP and the issue was gone.

//VUE_APP_API_URL=https://myapp.test/api  
VUE_APP_API_URL=http://myapp.test/api

I hope this resolves your issue.