Wasp-lang•7mo ago

CORS Issues After Deployment (Email Auth)

Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' 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.
index-Bh8OtO0g.js:57 
        
        
       POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       GET https://desig... net::ERR_FAILED 502 (Bad Gateway)

Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' 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.
index-Bh8OtO0g.js:57 
        
        
       POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       GET https://desig... net::ERR_FAILED 502 (Bad Gateway)

Sorry to keep berading with questions (although i seem to eventually solve them haha. But i'm getting CORS errors during the signup and login process after deploying. Do i have to setup CORS in a different way upon deployment? I thought WASP handled that. Also the app isnt ready yet so i just deleted the full url

25 Replies

kapa.ai•7mo ago

Hi @Jacob Ferrari. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Wasp does handle CORS, but it seems like there might be an issue with the configuration. According to a Github issue (https://github.com/wasp-lang/wasp/issues/94) on the Wasp repository, the current CORS setup in Wasp is not restrictive enough and allows all CORS requests. The team is aware of this and is working on making it more restrictive. One of the suggestions in the comments of the issue is to add support for environment variables that can be used to configure CORS options, including the allowed origins. This would allow you to specify the origins that are allowed to make requests to your server, which could help resolve the CORS issue you're experiencing. However, this feature doesn't seem to be implemented yet. In the meantime, you might want to look into other ways to configure CORS for your deployment environment. Also, it's worth noting that there was a discussion on Discord (https://discord.com/channels/686873244791210014/1201898985300971540) about a similar issue where a user was experiencing CORS errors after deploying their app on fly.io. The issue seemed to be related to the server rejecting requests due to CORS errors because it was configured to accept requests only from a specific domain. You might want to check if something similar is happening in your case. Lastly, if you recently upgraded your Wasp version, you might be experiencing some issues due to the migration. The migration guide (https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12#1-migrate-to-the-new-auth-system) mentions that after deploying the new code and before migrating the production database data, new users will be able to sign up, but existing users won't be able to log in, and already logged in users will be logged out. This could potentially be related to the issues you're experiencing with the signup and login process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

@kapa.ai is there anything i have to change in WASP or in fly.io after ddeployment in regards to CORS?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there are a few things you might need to adjust in Wasp and on fly.io regarding CORS after deployment: 1. Set the WASP_WEB_CLIENT_URL environment variable: This is the URL where your frontend app is running. The server needs to know about it to properly configure Same-Origin Policy (CORS) headers. You can set this variable on fly.io using the following command:

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

Replace <https://mycoolapp.com> with your actual client URL. This step is mentioned in the Wasp documentation (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app). 2. Customize Global Middleware: If you want to add extra domains to CORS, you can do so by customizing the global middleware in Wasp. Here's an example of how to do it:

import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

This example is taken from the Wasp documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). Remember to replace '<https://example1.com',> '<https://example2.com'> with your actual domains. Please note that these are general instructions and the exact steps might vary depending on your specific setup and deployment environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

@kapa.ai is this error relevent? WARNING The app is not listening on the expected address and will not be reachable by fly-proxy. You can fix this by configuring your app to listen on the following addresses: - 0.0.0.0:8080 Found these processes inside the machine with open listening sockets: PROCESS | ADDRESSES
-----------------*-------------------------------------- /.fly/hallpass | [...

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, this warning is relevant. It's indicating that your application is not listening on the expected address (0.0.0.0:8080), which means it won't be reachable by the fly-proxy. To fix this, you need to configure your application to listen on 0.0.0.0:8080. This is typically done in your server setup code, where you specify the host and port for your server to listen on. In the context of a Wasp application, you might need to adjust the server configuration. However, without the specific server setup code, it's hard to provide a precise solution. Please refer to your server's documentation or the Wasp documentation (https://wasp-lang.dev/docs) for more information on how to configure your server to listen on a specific host and port. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

you need to configure your application to listen on 0.0.0.0:8080, is this something i do in fly? @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, configuring your application to listen on 0.0.0.0:8080 is typically done in your application's server setup code, not on Fly.io. However, you do need to ensure that the PORT environment variable is set to 8080 on Fly.io, as this is the port your application should be listening on according to the warning message. You can set the PORT environment variable on Fly.io using the following command:

flyctl secrets set PORT=8080

flyctl secrets set PORT=8080

This command is part of the Wasp deployment instructions (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app). Please note that the exact steps might vary depending on your specific setup and deployment environment. If you're still having trouble, I recommend checking the documentation of the server you're using or reaching out to the Wasp community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

"You can fix this by configuring your app to listen on the following addresses:
0.0.0.0:8080" where do i change this in main.wasp? @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The main.wasp file doesn't directly control the server's listening address and port. This is typically handled in the server setup code, which is written in JavaScript or TypeScript and imported into main.wasp. However, Wasp doesn't currently expose a way to set the listening address and port directly. The server automatically listens on 0.0.0.0 and the port specified by the PORT environment variable. If you're seeing a warning that your app isn't listening on 0.0.0.0:8080, it's likely that the PORT environment variable isn't set correctly on Fly.io. You can set it using the following command:

flyctl secrets set PORT=8080

flyctl secrets set PORT=8080

This command is part of the Wasp deployment instructions (https://wasp-lang.dev/docs/advanced/deployment/manually#set-up-a-flyio-app). If you've already done this and are still seeing the warning, there might be an issue with your server setup code or with how your app is being deployed on Fly.io. In that case, I recommend reaching out to the Wasp community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

alright im lost

miho•7mo ago

It was a public holiday today and most of the team was off, we'll get back to you tomorrow 🙂

ZuckOP•7mo ago

@miho all good !! Enjoy the holiday thank you for even responding to this, I always appreciate you guys 🙏🙏 lightly bumping this no rush!

martinsos•7mo ago

Eh CORS, complicating our lives always :D. Wasp helps with CORS to some degree, but you do also have to a bit of your own setup a bit for now (I really want that to be completely done (to the degree it is possible) by Wasp in the future, and it likely will, but not yet). Other team members might be better suited to answer this, but I believe we should have this covered by our docs. For example in https://wasp-lang.dev/docs/advanced/deployment/cli we tell you this (check image). And this is the same thing (another image). Do you have this configured correctly on Fly? Other than that, it might be that sometihng else is wrong and is masquerading as a CORS error. How did you deploy to Fly, using wasp deploy fly deploy? If you go to the URL of your server (now that it is hosted on Fly -> check, in dev tools in your browser, the requests your dpeloyed client is doing toward the server, you will see the URL for server there, go to its root) you should see "hello world", it would be good to confirm that works well so we know that server is running and also on the URL that clients expect it to be.

ZuckOP•7mo ago

I used wasp deploy fly launch ! But!! I didn’t do the secrets set web client url! I think I maybe did it after but not 100%. I’ll be on my computer in a couple hours and double check what you said and then redeploy with the proper client url set! Thanks so much I’ll let you know if it works!

ZuckOP•7mo ago

@martinsos Okay so i redployed and this is my app: https://design-ai-client.fly.dev/

My Open SaaS App

I made a SaaS App. Buy my stuff.

ZuckOP•7mo ago

Still getting the CORS error. My server link doesnt say "hello world" it just endlessly loads. Could this error be the culprit? WARNING The app is not listening on the expected address and will not be reachable by fly-proxy. You can fix this by configuring your app to listen on the following addresses: - 0.0.0.0:8080 Found these processes inside the machine with open listening sockets: PROCESS | ADDRESSES
-----------------*---------------------------------------- /.fly/hallpass | [fdaa:9:5507:a7b:8a0f:f604:2f8e:2]:22 @martinsos Nevermind i figured it out lol i have to set all my environment variables DUHHH gosh darn @martinsos @kapa.ai my memory, specifically for my database is to low... how can i raise that?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Increasing the memory for your database typically involves resizing your server or database instance. The exact steps can vary depending on your hosting provider. If you're using a Virtual Private Server (VPS), you might need to resize your VPS to a plan with more memory. For example, in a Discord conversation (https://discord.com/channels/686873244791210014/1213593156646604820), a community member mentioned that they resolved a similar issue by resizing their VPS from 512MB to 1GB of RAM. If you're using a managed database service, you might need to upgrade to a plan with more memory or adjust your database's configuration settings. Please refer to your hosting provider's documentation or support resources for specific instructions on how to increase the memory for your server or database instance. Also, keep in mind that if your application is using more memory than expected, it might be due to a memory leak or inefficient use of resources in your code. It could be worth profiling your application's memory usage to identify any potential issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

@kapa.ai Sorry im talking about raising the memory in fly.io

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To increase the memory for your application on Fly.io, you can scale your application to a larger VM size. Fly.io offers various VM sizes, each with different amounts of CPU and memory. You can use the flyctl platform vm sizes command to see the available VM sizes:

flyctl platform vm sizes

flyctl platform vm sizes

Once you've chosen a VM size, you can scale your application to use that size with the flyctl scale vm command. For example, to scale your application to use the dedicated-cpu-1x VM size, you would run:

flyctl scale vm dedicated-cpu-1x

flyctl scale vm dedicated-cpu-1x

Replace dedicated-cpu-1x with the VM size you want to use. Please note that larger VM sizes will increase the cost of running your application on Fly.io. Be sure to review the pricing for each VM size before scaling your application. For more information, refer to the Fly.io documentation (https://fly.io/docs/reference/regions/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

@kapa.ai So im trying to scale the DB memory, but the WASP commands only let me scale client or server. Im trying this but not working: (base) jacobferrari@MacBook-Pro-3 app % wasp deploy fly cmd scale show --context db
error: option '--context <context>' argument 'db' is invalid. Allowed choices are client, server. ❌ --- [Error] Deploy command failed: --------------------------------------------- Deploy command failed with exit code: 1

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The --context option in the wasp deploy fly cmd command currently only supports client and server as valid arguments. This is why you're seeing an error when you try to use db as an argument. To scale your database on Fly.io, you would need to use Fly.io's native commands, not the Wasp CLI. Fly.io allows you to scale your Postgres database by adjusting the volume size parameter. Here's how you can do it: 1. First, list your apps on Fly.io to find your database app:

flyctl apps list

flyctl apps list

2. Then, scale your database app:

flyctl volumes update <volume-name> --size <new-size> --app <app-name>

flyctl volumes update <volume-name> --size <new-size> --app <app-name>

Replace <volume-name> with the name of your volume, <new-size> with the new size in GB, and <app-name> with the name of your database app. Please note that increasing the volume size will increase the cost of running your database on Fly.io. Be sure to review the pricing for each volume size before scaling your database. For more information, refer to the Fly.io documentation (https://fly.io/docs/reference/volumes/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jacob Ferrari, 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?

ZuckOP•7mo ago

I can probably close this🙏i just manually deployed to fly io and netlify!

martinsos•6mo ago

@Jacob Ferrari sorry, I somehow managed to drop the ball on this one! I see you managed to solve quite a few things yourselves, but I would love to better understand how it all went so we can improve stuff in the future. 1. From what I figure out, you forgot to set your env variables when deploying to Fly, right? You are not the first one, it seems our docs are lacking on that front, we will be looking into improving that! If you have any specific suggestions for this they are very welcome. The message you got about 0.0.0.0:8080, was there anything specific going on there, or was it just the consequence of missing env vars? 2. How did you figure out that your memory on Fly.io is too low? Btw was it at the end disk memory for DB, or memory (RAM) for the server, I would assume the second? Also how did you go about this at the end? Thanks a lot!

ZuckOP•6mo ago

All good! @martinsos 1. I think it just had to do with not setting .env variables. Not sure about the 0.0.0.0:8080 message. 2. I think it ended up being end disk memory for DB. I believe it told so in one of the error logs!

martinsos•6mo ago

Thanks @Jacob Ferrari !

Gaming

Programming

CORS Issues After Deployment (Email Auth)