W
Wasp•3w ago
Orestis

Failed to Load Resource error

Hey everyone! I'm new to Open Wasp but have a background in coding (especially with Python). I'm currently building my first app using the Open SaaS template and trying to deploy it on Fly.io. I'm running into a couple of issues: 1. Login Option Missing on Deployed App The login option works fine on localhost, but when I deploy to Fly.io, it doesn't appear. In the browser console, I'm seeing repeated errors like this: 
   Failed to load resource: net::ERR_NAME_NOT_RESOLVED (502 and 503 errors)
   https://[my-app-server].fly.dev/auth/me

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.
   
   Failed to load resource: net::ERR_NAME_NOT_RESOLVED (502 and 503 errors)
   https://[my-app-server].fly.dev/auth/me

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.
It seems like it's not resolving the server endpoint correctly on the deployed site. Any ideas on what might be going wrong? 2. Network Error with Custom Operation I created a wasp/client/operations operation that makes a request to a Flask API. This works fine locally and even when calling the Fly.io Flask API from localhost. But on the deployed app, I get a generic "Network Error." Not sure how to debug this any tips? Would really appreciate any help or suggestions! 🙏
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Orestis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Resolving CORS Issues in Your Deployed Wasp App It looks like you're experiencing CORS (Cross-Origin Resource Sharing) issues with your deployed Wasp app on Fly.io. This is a common issue when deploying Wasp applications, especially when the client and server are on different domains. Missing Login Option Issue The login option is missing because your client app can't communicate with your server due to CORS restrictions. When you deploy to Fly.io, you need to ensure that: 1. Your server knows the correct client URL 2. CORS is properly configured to allow requests from your client domain Solution: You need to set the WASP_WEB_CLIENT_URL environment variable for your server app: 
wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://your-client-app-name.fly.dev>
wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://your-client-app-name.fly.dev>
This ensures that your CORS configuration is updated to allow requests from your client domain Deploying with the Wasp CLI. Network Error with Custom Operation The network error with your custom operation is likely also related to CORS. When making API requests from your client to external services (like your Flask API), you need to ensure that: 1. The Flask API allows requests from your client domain 2. Your client has the correct URL for the Flask API Debugging CORS Issues: For API endpoints, Wasp doesn't automatically apply CORS middleware like it does for operations. You need to explicitly configure it: 
apiNamespace myApi {
  middlewareConfigFn: import { apiMiddleware } from "@src/apis",
  path: "/api"
}
apiNamespace myApi {
  middlewareConfigFn: import { apiMiddleware } from "@src/apis",
  path: "/api"
}
Then in your implementation file: 
import { MiddlewareConfigFn } from "wasp/server";
export const apiMiddleware: MiddlewareConfigFn = (config) => {
  return config;
};
import { MiddlewareConfigFn } from "wasp/server";
export const apiMiddleware: MiddlewareConfigFn = (config) => {
  return config;
};
This enables CORS for all APIs under the specified path Making Sure CORS Works. Additional Troubleshooting: 1. Check your browser's network tab to see the exact requests being made 2. Verify that your environment variables are correctly set on Fly.io 3. Make sure your server is actually running (check Fly.io logs) 4. Try redeploying your app - sometimes this resolves issues as seen in some community reports If you're still having issues, you might want to consider upgrading to the latest version of Wasp, as some CORS-related bugs have been fixed in recent releases. Hope this helps! Let me know if you need more specific guidance. I'm here to help you get your Wasp app running smoothly on Fly.io! kapa.ai ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Orestis, 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?
Orestis
OrestisOP•3w ago
I am using the wasp cli so the WASP_WEB_CLIENT_URL is automatically set correctly with the wasp deploy fly launch command. I think I have performed this troubleshooting but could not figure out the issue. I am not using a custom domain. This is solved. Apparently I had not setup some secret keys on fly.io The error message was a bit misleading.

Did you find this page helpful?