Cors policy
Looks like I'm running into cors issues with deploying my app to coolify.
I've confirmed that I've setup my environment variables correctly and everything. I was looking at this: https://wasp.sh/docs/deployment/extras#custom-domain-setup, and am thinking that Wasp is supposed to handle cors correctly automatically. Is that correct?
Extras | Wasp
In this section, we will cover some additional topics that are important for deploying Wasp apps in production.
16 Replies
Hi @hadanator. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Wasp is designed to handle CORS automatically in most standard deployment scenarios, but there are some important details and potential pitfalls to be aware of.
By default, Wasp configures CORS middleware in the generated Express server, allowing the frontend to communicate with the backend. However, for production deployments—especially when using custom domains or deploying to platforms like Coolify—you need to explicitly set the correct environment variable so the server knows the client’s URL and can configure CORS accordingly.
The key environment variable is:
You should set this variable for your server app to match the URL of your deployed frontend. This tells Wasp what origin to allow for CORS requests. If this is not set correctly, or if there’s a mismatch (such as a trailing slash issue), you may encounter the CORS error you described. This is documented in the official Wasp docs for custom domain setup and CORS configuration:
Using a Custom Domain For Your App. Additionally, be careful with the exact value of the URL—issues like a missing or extra trailing slash can cause CORS to fail, as discussed in community threads and GitHub issues. Double-check that the value matches your frontend’s URL exactly, without a trailing slash if not needed, as this has been a source of CORS errors for others as well Ensure the REACT_APP_API_URL and WASP_WEB_CLIENT_URL env vars are valid URLs. If you have set the environment variable correctly and are still experiencing issues, you may need to further customize the CORS middleware. Wasp allows you to do this via the middleware configuration in your Wasp project, where you can specify additional allowed origins or tweak the CORS settings as needed Customize Global Middleware. In summary:
- Wasp does handle CORS automatically, but only if you provide the correct client URL via the environment variable. - Double-check the value for typos or trailing slashes. - If needed, customize the CORS middleware for more advanced scenarios. If you continue to have issues after these steps, please provide more details about your environment variable setup and deployment configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
Using a Custom Domain For Your App. Additionally, be careful with the exact value of the URL—issues like a missing or extra trailing slash can cause CORS to fail, as discussed in community threads and GitHub issues. Double-check that the value matches your frontend’s URL exactly, without a trailing slash if not needed, as this has been a source of CORS errors for others as well Ensure the REACT_APP_API_URL and WASP_WEB_CLIENT_URL env vars are valid URLs. If you have set the environment variable correctly and are still experiencing issues, you may need to further customize the CORS middleware. Wasp allows you to do this via the middleware configuration in your Wasp project, where you can specify additional allowed origins or tweak the CORS settings as needed Customize Global Middleware. In summary:
- Wasp does handle CORS automatically, but only if you provide the correct client URL via the environment variable. - Double-check the value for typos or trailing slashes. - If needed, customize the CORS middleware for more advanced scenarios. If you continue to have issues after these steps, please provide more details about your environment variable setup and deployment configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
@kapa.ai if I wanted to log the WASP_WEB_CLIENT_URL on the server that's deployed with docker, how could I do that so I could debug this issue in production?
Let me check the knowledge base for you again. One moment! :books:
----------------------
You can log the value of WASP_WEB_CLIENT_URL on the server by accessing the server configuration object provided by Wasp. In your server code, you can do the following:
This will print the value of WASP_WEB_CLIENT_URL (as set in your environment) to the server logs. This approach works in both development and production, including when running your server in Docker, as long as the environment variable is set correctly in your Docker container.
Reference: Accessing the configuration – Server configuration object
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @hadanator, 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?
@kapa.ai Where exactly is the server code that I can put that snippet in that won't be removed by
wasp clean?Let me check the knowledge base for you again. One moment! :books:
----------------------
The knowledge sources do not explicitly specify a recommended location in your Wasp project where you can add custom server-side code (such as logging environment variables) that will persist across commands like wasp clean, which removes generated files.
However, based on Wasp's architecture, you should place your custom server code in your project's src/server directory (or wherever your custom server logic lives, such as in a custom setup function or middleware). Files in your src directory are part of your application source and are not removed by wasp clean—only files in the .wasp or .wasp/build directories are regenerated and should not be modified directly.
If you want to log the environment variable during server startup, you can do so in your server setup function. For more details on the server setup function and where to place such code, see the Server Config documentation.
In summary:
- Place your logging code in your own source files (e.g., in src/server or in your server setup function). - Do not place it in generated files or in the .wasp directory, as those will be overwritten by wasp clean. If you need more specific guidance on where to put a server setup function, refer to the server setup function docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
- Place your logging code in your own source files (e.g., in src/server or in your server setup function). - Do not place it in generated files or in the .wasp directory, as those will be overwritten by wasp clean. If you need more specific guidance on where to put a server setup function, refer to the server setup function docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
@kapa.ai i have these actions in my deploy.yml:
Is there a way i can echo some sort of code into
.wasp/build/sdk/wasp/server/config.ts from here? For instance, I just want to add a line console.log(frontendUrl) to line 21 of that file.Let me check the knowledge base for you again. One moment! :books:
----------------------
The knowledge sources do not provide a built-in or officially recommended way to programmatically modify generated files like .wasp/build/sdk/wasp/server/config.ts during your CI/CD pipeline. In fact, modifying files inside .wasp/build is generally discouraged, as these files are regenerated every time you run wasp build and will be overwritten.
However, if you still want to inject a line into a generated file as part of your CI/CD process, you could technically use a shell command (such as sed) in your workflow after wasp build and before building your Docker image. For example:
This command would insert console.log(frontendUrl) at line 21 of the specified file. But please note:
- This is a workaround and not an officially supported or stable approach.
- Any changes you make this way will be lost the next time wasp build is run.
- There is no guarantee that the structure or line numbers of generated files will remain the same between Wasp versions or even builds.
If you need persistent custom server logic, the recommended approach is to use your own server setup function in your source code, as described in the Server Config documentation. This way, your changes are not lost and are under your control.
In summary:
- You can technically use shell commands to inject code into generated files in CI, but this is fragile and not recommended for production or long-term use. - The knowledge sources do not describe a supported way to do this directly. - For persistent changes, use your own server setup function in your source code instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
- You can technically use shell commands to inject code into generated files in CI, but this is fragile and not recommended for production or long-term use. - The knowledge sources do not describe a supported way to do this directly. - For persistent changes, use your own server setup function in your source code instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
@kapa.ai I'm still getting cors errors when running my client. I'm also getting another error:
https://<myapp-api>/auth/me net::ERR_FAILED 502 (Bad Gateway)
Let me check the knowledge base for you again. One moment! :books:
----------------------
The CORS error combined with a 502 Bad Gateway error (
A 502 error typically means the server is down, unreachable, or misconfigured. Make sure your backend server is running and accessible at the expected URL. You can try accessing the API endpoint (e.g.,
Double-check that your environment variables (such as
If you are using a custom domain, ensure your DNS is set up correctly (e.g., CNAME records) and that the domain resolves to your server. There have been cases where the client URL worked but the custom domain did not due to DNS misconfiguration Discord: Problems with server on fly.io. 4. Proxy or Networking Issues:
If you are using a reverse proxy (like Nginx, Traefik, or a platform like Coolify), ensure it is correctly forwarding requests to your backend server. Misconfiguration here can also result in 502 errors. 5. CORS Configuration:
If your server is up and reachable, but you still get CORS errors, ensure CORS is enabled for the correct origin. Wasp configures CORS automatically if you set the correct environment variable, but you may need to customize it for advanced scenarios Making Sure CORS Works. 6. Trailing Slash Issues:
Be careful with trailing slashes in your URLs, as this can cause issues with API calls Deploying web client (frontend). Summary:
A 502 error means your client cannot reach the backend, so fix that first (check server status, DNS, and proxy). Once the server is reachable, if you still get CORS errors, review your environment variables and CORS setup as described above. If you need more targeted help, please provide: - The exact URLs you are using for client and server. - How you are deploying both client and server. - Any relevant logs from your server or proxy. Let me know if you need help with any of these steps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
net::ERR_FAILED 502 (Bad Gateway)) suggests that your client is unable to reach the backend server at all, not just being blocked by CORS. This usually means there is a problem with your server deployment or networking, not just CORS configuration.
Here are some things to check, based on the knowledge sources:
1. Server Availability:A 502 error typically means the server is down, unreachable, or misconfigured. Make sure your backend server is running and accessible at the expected URL. You can try accessing the API endpoint (e.g.,
/auth/me) directly in your browser or with curl to see if it responds.
2. Correct Environment Variables:Double-check that your environment variables (such as
WASP_WEB_CLIENT_URL) are set correctly in your production environment. If these are not set or are incorrect, CORS will not be configured properly, and the server might not know which origins to allow Accessing App Config – Server configuration object.
3. Custom Domain and DNS:If you are using a custom domain, ensure your DNS is set up correctly (e.g., CNAME records) and that the domain resolves to your server. There have been cases where the client URL worked but the custom domain did not due to DNS misconfiguration Discord: Problems with server on fly.io. 4. Proxy or Networking Issues:
If you are using a reverse proxy (like Nginx, Traefik, or a platform like Coolify), ensure it is correctly forwarding requests to your backend server. Misconfiguration here can also result in 502 errors. 5. CORS Configuration:
If your server is up and reachable, but you still get CORS errors, ensure CORS is enabled for the correct origin. Wasp configures CORS automatically if you set the correct environment variable, but you may need to customize it for advanced scenarios Making Sure CORS Works. 6. Trailing Slash Issues:
Be careful with trailing slashes in your URLs, as this can cause issues with API calls Deploying web client (frontend). Summary:
A 502 error means your client cannot reach the backend, so fix that first (check server status, DNS, and proxy). Once the server is reachable, if you still get CORS errors, review your environment variables and CORS setup as described above. If you need more targeted help, please provide: - The exact URLs you are using for client and server. - How you are deploying both client and server. - Any relevant logs from your server or proxy. Let me know if you need help with any of these steps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
@kapa.ai from the opensaas project, what's another endpoint that doesn't require authentication that I could try and curl?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources provided do not contain information about specific public (unauthenticated) endpoints in the opensaas project. Therefore, I cannot confidently suggest another endpoint you could try to curl without authentication. If you have access to the opensaas project's code or documentation, you may want to look for endpoints marked as public or with
isPublic: true in their configuration, as described in the CRUD API reference.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @hadanator, 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?@kapa.ai how do I mark this as solved?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not contain information about how to mark a question or issue as solved in the context you provided. If you are referring to marking a GitHub issue as solved, typically this is done by closing the issue, but the specific steps or UI for marking something as solved are not detailed in the provided sources. If you need instructions for a particular platform (e.g., GitHub, Discord, or another), please specify, and I'll check if the knowledge sources cover it.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @hadanator, 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?
What was the solution?
I have no idea. I was getting cors errors for a bit, messed with my deployment a couple times, and later it was just working. Probably a "me" problem, but I don't know what fixed it haha. I was trying to mark this as solved so it didn't sit in your queue to take a look at it.
Ok marked it as solved. thanks for following up!