Focus on what comes first

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.


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 '' from origin '' 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.

Tagged in : Tagged in :
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.