Network error on Sign up after deploy on Fly.io
I have deployed to fly.io and it was working, it's deployed with a specific domain and the certificates are configured.
Now a Network Error is ocurring. The browser says it CORS policy error (although I read in other posts here it could be for another reason).
There is no error on server logs.
I'd rather understand the issue instead of just redeploying.
My wasp version is 0.13
16 Replies
Hi @7Nic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided, there could be a few reasons why you're experiencing a network error on sign up after deploying on Fly.io. Here are some steps you can take to troubleshoot the issue:
1. Check your environment variables: Make sure that you have set up your environment variables correctly. In particular, ensure that the
WASP_WEB_CLIENT_URL environment variable for your server app is set to your domain. You can set this variable by running the following command:
Replace yourdomain.com with your actual domain. This step is crucial for keeping your CORS configuration up to date (source (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app)).
2. Inspect network activity: Open the developer tools in your browser and check the "Network" tab. Look for any requests that are taking a long time or failing. This could give you a clue as to what's causing the network error.
3. Check your server logs: Even though you mentioned there are no errors in your server logs, it's worth double-checking. Look for any unusual activity or error messages.
4. Redeploy your app: Sometimes, redeploying your app can resolve the issue. You can do this by running wasp deploy fly deploy.
If none of these steps resolve the issue, it might be helpful to share more details about the exact error message you're seeing, as well as any relevant code or configuration settings.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @7Nic, 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?Hey @7Nic!
The bot's answer is correct, but since you want to understand the details, I'll dig into it.
In your case, the issue is indeed a misconfigured CORS policy (official name: same origin policy). In short, this is a browser mechanism that prevents websites from reading the data from other site's servers. The logic is "you wouldn't want someone's blog to read the data from your email that you're signed into in a different tab"
The browser enforces this when the origin of the site (
voxgen.net) is different than the origin of the server (voxgen-server.fly.dev). Origin is just a fancy name for domain + port + protocol.
The browser by default assumes that those domains have nothing to with each other and that voxgen.net has no business reading the data from voxgen-server.fly.dev.
To prevent the error, voxgen-server.fly.dev must somehow tell the browser "Hey, it's cool, voxgen.net can read my data" and it does this by attaching an Access-Control-Allow-Origin: voxgen.net header to its responses.
Normally, you'd have to configure this header yourself using some kind of middleware, but with Wasp, the framework does it for you. All you need to do is define the WASP_WEB_CLIENT_URL=https://voxgen.net environment variable, and Wasp takes care of setting the header.
Hope that clears it up! For more, read: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policyYou should be teaching
Very nice explanation
Thanks! It was that
I probably didn't update the domain on redeploys.
And indeed you should be teaching 😆
Wohooo @7Nic, you just became a Waspeteer level 3!
Haha, thanks for the praise guys! Glad you got it sorted out
@7Nic Anything else I can help you with?
Thanks, @sodic for the clear explanation! I have a follow-up question: how can I apply this to a subdomain, such as https://www.voxgen.net ? Is it possible to add an additional WASP_WEB_CLIENT_URL environment variable for this purpose?
Wohooo @Janus, you just became a Waspeteer level 1!
You can't do that, but you can do something else that achieves the same thing
Here's a link that explains the common practice: https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains
Stack Overflow
Access-Control-Allow-Origin Multiple Origin Domains?
Is there a way to allow multiple cross-domains using the Access-Control-Allow-Origin header?
I'm aware of the *, but it is too open. I really want to allow just a couple domains.
As an example,
And here's how you can do that in Wasp: https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware
Configuring Middleware | Wasp
Wasp comes with a minimal set of useful Express middleware in every application. While this is good for most users, we realize some may wish to add, modify, or remove some of these choices both globally, or on a per-api/path basis.
Thanks @sodic! It worked for me 😉
Very happy to hear it! How did you find the process? Cumbersome or easy enough?
Quite easy! The links you shared were really helpful 👍 Thanks again!
I deployed to Fly.io and I am getting "network error." After many hours, I still cannot get it to work on Fly.io
Hey @tonykay4307, please open a new thread and share the details. Tell us what you tried, what the error is, etc...