We have our laravel project hosted on AWS using Laravel Vapor. At random some users visiting our website are getting a CORS error for our javascript files, which can just be fixed by deleting the cache and reopening the browser. We do use the standard vapor configuration for our vapor environment with a vue3 frontend.
The error looks something like this:
Access to XMLHttpRequest at 'cloudfront/randomjsfile from origin 'ourdomain' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am experiencing the exact same issue. I have allowed Laravel Vapor to handle the deployment and users are randomly experiencing CORS issues with Cloudfront.
These are the errors appearing in the browser console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://d2i2jbxe32rzk7.cloudfront.net/e3095b3d-3e74-49a8-ac7b-dda21f4ca1c7/build/assets/CardHeader.803f1806.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Module source URI is not allowed in this document: “https://d2i2jbxe32rzk7.cloudfront.net/e3095b3d-3e74-49a8-ac7b-dda21f4ca1c7/build/assets/CardHeader.803f1806.js”.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://d2i2jbxe32rzk7.cloudfront.net/e3095b3d-3e74-49a8-ac7b-dda21f4ca1c7/build/assets/Label.892a2f9f.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Module source URI is not allowed in this document: “https://d2i2jbxe32rzk7.cloudfront.net/e3095b3d-3e74-49a8-ac7b-dda21f4ca1c7/build/assets/Label.892a2f9f.js”.
Uncaught (in promise) TypeError: error loading dynamically imported module
This issue continues to pop up for me as well. Seems to occur after doing a hard refresh on the website. This project is running on vite, and I have another project that is running on webpack that does not seem to have the issue.
Not sure why that would affect things, but looking for any solution I can right now! @simonmeevo@devenjahnke@kimcodes are you running on Vite as well or Webpack?
Navigate to your CloudFront Distribution for the Vapor Assets -> Selected Behaviours -> Select Default (Edit) -> Go to Viewer Response and select your new CloudFront Function.
This issue seemed to arise due to the subdomains and CNAME records pointing to the Vapor application. The browser was caching the resources for 1 domain, then when navigating to another some asset files did not contain the 'Access-Control-Allow-Origin' header. By implementing this CloudFront function as long as there is an 'origin' in the request, then the returned response will contain 'Access-Control-Allow-Origin'.
After a couple of people notated that this did not work, I migrated a production MIX environment on Vapor to VITE on VAPOR. I encountered the same issue, and applied the same Cloudfront Function to the Cloudfront distribution and resolved the issue immediately. Would a video tutorial help?
It's a pain in the @#$ but the vapor asset:invalidate-cache is not the resolution to this issue due to the fact that you're looking at a 20-minute invalidation in a production environment if that resolves it.
@collinped I followed your advice and attached the function to the default behaviour of the vapor distribution but no luck. Still errors. This could be a good video topic since mine is a fairly standard jetstram starter-pack project attempting to run on vapor. It is a very common scenario if you ask me :)
We're having the same problem but it only happens occasionally and only seems to happen for folks in the US. I tried the Cloudfront "add-cors-header" solution @collinped suggested but it didn't seem to make a difference.
I also contacted support and got the same response as @simonmeevo "run vapor asset:invalidate-cache" which does seem to resolve the issue. However, running this command automatically as part of our post-deploy process doesn't seem to work.
Really hoping someone can figure out what's causing the underlying issue. My hunch is that it has something to do with Vite and subdomains. I'm currently testing adding the "Managed-SimpleCORS" response header policy to my Vapor Cloudfront distribution so that the Access-Control-Allow-Origin: * header is always added.
Here we have the same issue. We have vite in our project and our US based customers experiencing the issue. Can't tell if any of these are related. Redeploy fixes the issue but only for some time.
Does anyone here seem to notice a pattern of when it happens? It seems like an invalidation or fresh deployment fixes the issue for everybody so "fresh" files are fine. For my app, I notice it after a few weeks without a deployment. I have a suspicion to what might be causing it , but I'd like to know if anyone else notices the "few weeks" problem.
