ERR_CONNECTION_REFUSED and cors

S◎Lamy · 2024-11-07T10:13:04.504Z

I've been getting this error can't find where I should fix it and it's a normal template just testing it out

K

kapa.ai•11/7/24, 10:13 AM

Hi @S◎Lamy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•11/7/24, 10:13 AM

----------------------
Based on the information provided in the knowledge sources, it seems you're encountering a CORS (Cross-Origin Resource Sharing) error along with an ERR_CONNECTION_REFUSED issue. This is a common problem when working with Wasp applications, especially during development or when deploying to different environments. Let's address this issue step by step:

CORS Configuration:
Wasp provides built-in CORS support, but sometimes it needs to be configured properly. You can customize the CORS settings in your Wasp application by modifying the global middleware. Here's how you can do it:

   app todoApp {
     // ...
     server: {
       setupFn: import setup from "@src/serverSetup",
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

   app todoApp {
     // ...
     server: {
       setupFn: import setup from "@src/serverSetup",
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

   app todoApp {
     // ...
     server: {
       setupFn: import setup from "@src/serverSetup",
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

   app todoApp {
     // ...
     server: {
       setupFn: import setup from "@src/serverSetup",
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

Then in your

serverSetup.js

serverSetup.js

serverSetup.js

serverSetup.js or

serverSetup.ts

serverSetup.ts

serverSetup.ts

serverSetup.ts file:

   import cors from 'cors'
   import { config } from 'wasp/server'
   
   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://localhost:3000']> }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'
   
   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://localhost:3000']> }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'
   
   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://localhost:3000']> }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'
   
   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://localhost:3000']> }))
     return middlewareConfig
   }

This configuration allows requests from your frontend URL and localhost:3000 Configuring Middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware).

Check your environment variables:Ensure that you have set up the correct environment variables, especially `REACT_APP_API_URL` in your `.env.client` file pointing to your server URL **Discord support thread** (<https://discord.com/channels/686873244791210014/1217758453326680095>).
API Namespace:If you're using custom API endpoints, consider using the `apiNamespace` feature to apply CORS middleware to all APIs under a specific path:

K

kapa.ai•11/7/24, 10:13 AM

   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
     path: "/api"
   }

   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
     path: "/api"
   }

   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
     path: "/api"
   }

   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddleware } from "@src/apis",
     path: "/api"
   }

This approach can help ensure CORS is properly set for all your API routes Custom HTTP API Endpoints (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works).

Check your domain configuration:If you're deploying your app, make sure your domain is properly set up. Issues with domain configuration can sometimes lead to CORS errors **Discord support thread** (<https://discord.com/channels/686873244791210014/1201898985300971540>).
Update Wasp version:Sometimes, updating to the latest version of Wasp can resolve CORS issues, as mentioned in this **Discord support thread** (<https://discord.com/channels/686873244791210014/1201898985300971540>).

If you're still encountering issues after trying these steps, it would be helpful to see more details about your specific setup and the exact error messages you're receiving. Consider sharing a minimal reproducible example of your Wasp app, ideally as a public GitHub repository, so that the Wasp team can better assist you Github Issue (https://github.com/wasp-lang/wasp/issues/1757).

Remember, CORS errors can be tricky to debug, especially when working with different environments or custom setups. Don't hesitate to reach out to the Wasp community on Discord for more specific help if these general solutions don't resolve your issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•11/7/24, 10:13 AM

Sorry @S◎Lamy, 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?

F

Filip•11/11/24, 2:21 PM

Hey @S◎Lamy, any luck with this? Still need help?

For what it's worth, this doesn't look like a CORS error. It seems like your server isn't running

FFilip Hey @S◎Lamy, any luck with this? Still need help? For what it's worth, this doe...

S

S◎LamyOP•11/11/24, 2:26 PM

Yooo

S

S◎LamyOP•11/11/24, 2:26 PM

Nah made it fam thank you

S

S◎LamyOP•11/11/24, 2:27 PM

It’s working

ERR_CONNECTION_REFUSED and cors

Similar Threads

Similar Threads

Similar Threads