CORS error when deployed to fly.io and using custom domain
I've deployed my Opensaas ap to fly.io (https://zigozi-server.fly.dev and -client.fly.dev), and configured https://zigozi.com (registered at a different hosting company) to resolve to it (to the fly.io) but when I visit
zigozi.com, I get the error "Access to XMLHttpRequest at 'https://zigozi-server.fly.dev/auth/me' from origin 'https://zigozi.com' has
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.".
How do I address this?
2 Replies
Hi @Kynetix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The CORS error you’re seeing is because your backend (https://zigozi-server.fly.dev) is not configured to allow requests from your custom domain (https://zigozi.com). By default, Wasp configures CORS based on the WASP_WEB_CLIENT_URL environment variable, which must match the domain your frontend is served from.
To fix this:
1. Set the WASP_WEB_CLIENT_URL environment variable on your server to your custom domain.
Run this command (replace with your actual domain if different): This tells your server to allow CORS requests from https://zigozi.com.
See official docs for custom domains and CORS. 2. Ensure your DNS records are correctly set up.
You should have added the A and AAAA records as instructed by the Fly CLI when you created the certificate for your domain. 3. Redeploy your server if needed.
After updating the environment variable, redeploy your server so the new CORS configuration takes effect. Why this works:
Wasp’s backend uses the WASP_WEB_CLIENT_URL to set the allowed CORS origin. If this variable is not set to your custom domain, requests from your frontend will be blocked by the browser’s CORS policy. If you need to allow multiple domains (for example, both your custom domain and the Fly.io domain during migration), you can customize the CORS middleware as described in the middleware config docs. Let me know if you need more details or run into issues after updating the environment variable! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kynetix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
Run this command (replace with your actual domain if different): This tells your server to allow CORS requests from https://zigozi.com.
See official docs for custom domains and CORS. 2. Ensure your DNS records are correctly set up.
You should have added the A and AAAA records as instructed by the Fly CLI when you created the certificate for your domain. 3. Redeploy your server if needed.
After updating the environment variable, redeploy your server so the new CORS configuration takes effect. Why this works:
Wasp’s backend uses the WASP_WEB_CLIENT_URL to set the allowed CORS origin. If this variable is not set to your custom domain, requests from your frontend will be blocked by the browser’s CORS policy. If you need to allow multiple domains (for example, both your custom domain and the Fly.io domain during migration), you can customize the CORS middleware as described in the middleware config docs. Let me know if you need more details or run into issues after updating the environment variable! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kynetix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
We have a section for this in the docs 🙂 https://wasp.sh/docs/deployment/deployment-methods/cli#fly-custom-domain
Let me know if you need more help!
Wasp CLI | Wasp
Wasp CLI can deploy your full-stack application with only a single command.