Wasp-lang•4mo 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•4mo 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?

Zuck•4mo ago

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

kapa.ai•4mo 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?

Zuck•4mo 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•4mo 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?

Zuck•4mo 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•4mo 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?

Zuck•4mo 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•4mo 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?

Zuck•4mo ago

alright im lost

miho•4mo ago

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

Zuck•4mo 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•4mo 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.

Zuck•4mo 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!

Zuck•4mo 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.

Gaming

Programming

CORS Issues After Deployment (Email Auth)