Just spent several hours yesterday understanding why we hit a CORS No “Access Control Allow Origin” header present issue again. Read loads about common Cross Origin Resource Sharing (CORS) again. Went through multiple Stack Overflow threads. This while I should have been focussing on something else. Here is the steps I took figuring out the real cause of the CORS issue. That and me getting back to the old adagio to focus on the root cause. Focus on what comes first.
Laravel CORS
I first checked by cors.php configuration file used with Barry’s amazing Laravel CORS Package for possible mistakes. It is an amazing package that helps Laravel apps deal with Cross Origin Sharing issues in a secure and easy way. Though we still need may to tweak the:
'allowedOrigins' => ['*'],
and make it possibly more secure despite the many origins all was fine on staging and production. There was nothing wrong with it.
Nginx Web Server
We also worried about our current Nginx site.conf locally, on staging and on production. But we soon realized it was still fine as well. Nothing had changed there really except for a new location dealing with cross domain errors using Bugsnag. Though that issue had not been solved completely this did not seem to be the cause of the current Cross Origin Resource Sharing problem.
Errors
The actual error message we got was this one:
Failed to load resource: the server responded with a status of 404 ()
VM4236:1 Access to XMLHttpRequest at 'https://staging.site.com/api/page/slug/1147' from origin 'https://sub.staging.site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
site.js?ver=20190728093329:1 Uncaught (in promise) Error: Network Error
at FtD3.t.exports (site.js?ver=20190728093329:1)
at XMLHttpRequest.p.onerror (site.js?ver=20190728093329:1)
FtD3.t.exports @ site.js?ver=20190728093329:1
p.onerror @ site.js?ver=20190728093329:1
Promise.then (async)
mounted @ site.js?ver=20190728093329:1
qt @ site.js?ver=20190728093329:1
en @ site.js?ver=20190728093329:1
insert @ site.js?ver=20190728093329:1
.......
2 @ site.js?ver=20190728093329:1
n @ site.js?ver=20190728093329:1
(anonymous) @ site.js?ver=20190728093329:1
(anonymous) @ site.js?ver=20190728093329:1
Mistakes were made
Now, my mistake was that I ignored the 404 not found error and went straight for the CORS issue. This as we had had this before and I got kind of upset seeing this error again. I was like. This cannot be happening again! Later on I realized is why the appropriate headers were not present to allow cross origin loading was that there was no data to be loaded in the first place. That is why we hit that 404 first. And no data .. no headers.
This realization allowed my to look into the missing data and realizing we were still having issues with our export / import of data. And that is what we will be working on in the coming days.
Focus on what comes first
So remember, focus on what comes first, not on the things that bother you the most. Go to the source of things. That is pretty much the same for anything in life but certainly for dealing with development errors.
