Solving subdomain CORS issues on Laravel Herd
I have been a satisfied Valet user for the past four years, but my recent frustrations with Homebrew have led me to look into Laravel Herd, which would make me independent of Homebrew.
One of the projects I'm working on is Mailcoach, an email marketing SaaS. When you obtain a license for Mailcoach, you are given your own subdomain, such as niels.mailcoach.app. To enhance user experience when switching teams, some assets are loaded from and cached on mailcoach.app. After migrating to Herd, I encountered CORS issues where the Access-Control-Allow-Origin header was missing on some assets. Without this working, I'm unable to load any Javascript.
Access to script at 'https://mailcoach.app.test/vendor/mailcoach/assets/app-9f8521a9.js' from origin 'https://niels.mailcoach.app.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How I solved this
To address this issue, you can add CORS headers manually. You can do this via the terminal with a command like the one below, or by clicking the Herd icon in your top navigation bar and selecting the "Show php.ini" option.
cd /Users/niels/Library/Application\ Support/Herd/config/
Next, open the valet/Nginx directory, which is on the same level as the php directory, and create a cors.conf file.
vim valet/Nginx/cors.conf
Now, let's add the CORS headers by copying and pasting the following content, or customize it according to your specific requirements.
# CORS Rulesadd_header Access-Control-Allow-Origin *;# END of CORS Rules #
Don't forget to restart Nginx afterwards in Herd.