Wasp•4w ago

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI:3001/auth/me:1

@kapa.ai Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI :3001/auth/me:1

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI script.js:1 Ignoring Event: localhost s @ script.js:1Understand this warningAI :3001/operations/get-customer-portal-url:1

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI :3001/auth/me:1

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI :3001/operations/get-customer-portal-url:1

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI script.js:1 Ignoring Event: localhost s @ script.js:1Understand this warningAI @tanstack_react-query.js?v=0faf1699:947 AxiosError onError @ @tanstack_react-query.js?v=0faf1699:947Understand this errorAI @tanstack_react-query.js?v=0faf1699:947 AxiosError onError @ @tanstack_react-query.js?v=0faf1699:947Understand this errorAI :3001/auth/me:1

Failed to load resource: net::ERR_CONNECTION_REFUSED

11 Replies

kapa.ai•4w ago

Hi @wbjb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the error messages you're seeing, it appears you're encountering connection issues between your client-side application and the server-side API in your Wasp project. This is a common issue that can occur due to various reasons. Let's break down the problem and potential solutions: 1. Connection Refused Error: The ERR_CONNECTION_REFUSED error typically means that the client (your browser) is unable to establish a connection with the server on the specified port (3001 in this case). 2. API Endpoints: The errors mention endpoints like /auth/me and /operations/get-customer-portal-url, which are trying to connect to localhost:3001. This suggests that your client-side code is expecting the server to be running on this port. 3. Possible Causes and Solutions: a. Server not running: Make sure your Wasp server is actually running on port 3001. You can start it using the wasp start command. b. Port conflict: If another process is using port 3001, Wasp might fail to start the server on that port. As mentioned in the Github issue about port conflicts (https://github.com/wasp-lang/wasp/issues/198), you can try killing any processes using the required ports:

   fuser -k 3000/tcp
   fuser -k 3001/tcp

   fuser -k 3000/tcp
   fuser -k 3001/tcp

Then try running wasp start again. c. Environment variables: If you're running your app in a different environment (like Gitpod), you might need to set the correct API URL. As mentioned in the Discord support thread (https://discord.com/channels/686873244791210014/1217758453326680095), you should set the REACT_APP_API_URL in your .env.client file to match your server URL. d. CORS issues: If you're running the client and server on different domains or ports, you might encounter CORS issues. Wasp should handle CORS configuration automatically, but make sure your client is using the correct server URL. 4. Debugging Steps: - Check if your server is running and on which port. - Verify that the client is trying to connect to the correct server URL. - Look for any error messages in your server console. - Ensure that your .env.client and .env.server files are correctly configured. If you're still having issues after trying these steps, you might want to share more details about your setup, including your Wasp version, the contents of your main Wasp file, and any relevant environment configurations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wbjb, 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?

wbjbOP•4w ago

@kapa.ai what is the correct api url in the opensaas template

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To answer your question about the correct API URL in the OpenSaaS template, let's look at the relevant information from the knowledge sources: The OpenSaaS template is one of the starter templates available in Wasp, as mentioned in the Starter Templates documentation (https://wasp-lang.dev/docs/project/starter-templates#available-templates). However, the knowledge sources don't provide specific information about the default API URL configuration for this template. In general, for Wasp applications, the API URL is set using the REACT_APP_API_URL environment variable. This is mentioned in the Client configuration object documentation (https://wasp-lang.dev/docs/advanced/accessing-app-config#client-configuration-object):

The client configuration object contains these fields:
- `apiUrl: String` - Set it with env var `REACT_APP_API_URL`

The client configuration object contains these fields:
- `apiUrl: String` - Set it with env var `REACT_APP_API_URL`

The correct API URL depends on your specific deployment setup. During development, when you run wasp start, Wasp automatically sets this for you. In production, you need to set it to match your server's URL. For example, if you're deploying manually, as described in the Deployment documentation (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables), you would need to set: 1. REACT_APP_API_URL for the client to point to your server URL 2. WASP_WEB_CLIENT_URL for the server to know where the frontend is running 3. WASP_SERVER_URL for the server to know its own URL Without more specific information about your deployment setup or any custom configurations in the OpenSaaS template, I can't provide the exact URL. However, typically, it would be something like: - For local development: <http://localhost:3001> - For production: <https://your-api-domain.com> If you're having trouble determining the correct URL, you might want to check the .env.client file in your OpenSaaS project, or consult the specific deployment instructions for the OpenSaaS template if they're provided. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wbjb, 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?

wbjbOP•4w ago

Access to fetch at 'http://localhost:3001/api/analyzeFunnel' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled @kapa.ai

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•4w ago

Wohooo @wbjb, you just became a Waspeteer level 3!

kapa.ai•4w ago

---------------------- This error message indicates that you're encountering a CORS (Cross-Origin Resource Sharing) issue in your Wasp application. Let's address this based on the information provided in the knowledge sources: 1. CORS Configuration in Wasp: Wasp includes CORS middleware by default, as mentioned in the Middleware Configuration documentation (https://wasp-lang.dev/docs/advanced/middleware-config). However, sometimes additional configuration might be needed for specific endpoints. 2. API Namespace and CORS: For custom API endpoints, you might need to use the apiNamespace feature to ensure CORS is properly configured. As explained in the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works), you can define an apiNamespace in your main.wasp file:

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

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

Then, in your implementation file:

export const myApiMiddlewareFn = (config) => {
  return config;
};

export const myApiMiddlewareFn = (config) => {
  return config;
};

This should enable CORS for all APIs under the "/api" path, including your "/api/analyzeFunnel" endpoint. 3. Global Middleware Customization: If you want to modify CORS settings globally, you can customize the global middleware as shown in the Configuring Middleware documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware):

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

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

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 explicitly allows requests from 'http://localhost:3000'. 4. Environment Variables: Make sure your environment variables are correctly set. As mentioned in the Discord support thread (https://discord.com/channels/686873244791210014/1217758453326680095), you should have REACT_APP_API_URL set in your .env.client file. To resolve this issue: 1. Implement the apiNamespace for your "/api" routes. 2. If needed, customize the global middleware to explicitly allow your frontend origin. 3. Double-check your environment variables. 4. Restart your Wasp application after making these changes. If you continue to face issues, you might want to review the Github issue about CORS configuration (https://github.com/wasp-lang/wasp/issues/94) for additional insights and potential solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wbjb, 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?

wbjbOP•4w ago

@kapa.ai can you please elaborate on this answer you geve me. which file does this go in ---------------------- This error message indicates that you're encountering a CORS (Cross-Origin Resource Sharing) issue in your Wasp application. Let's address this based on the information provided in the knowledge sources: 1. CORS Configuration in Wasp: Wasp includes CORS middleware by default, as mentioned in the Middleware Configuration documentation (https://wasp-lang.dev/docs/advanced/middleware-config). However, sometimes additional configuration might be needed for specific endpoints. 2. API Namespace and CORS: For custom API endpoints, you might need to use the apiNamespace feature to ensure CORS is properly configured. As explained in the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works), you can define an apiNamespace in your main.wasp file:

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

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

Then, in your implementation file:

export const myApiMiddlewareFn = (config) => {
  return config;
};

export const myApiMiddlewareFn = (config) => {
  return config;
};

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

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

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
}

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I'll elaborate on where each part of the code should go in your Wasp project: 1. API Namespace Configuration: The apiNamespace declaration goes in your main.wasp file. This is the main configuration file for your Wasp project.

   // In main.wasp
   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddlewareFn } from "@src/apis",
     path: "/api"
   }

   // In main.wasp
   apiNamespace myApi {
     middlewareConfigFn: import { myApiMiddlewareFn } from "@src/apis",
     path: "/api"
   }

2. API Middleware Function: The myApiMiddlewareFn implementation goes in a new or existing JavaScript/TypeScript file in your src directory. The example uses @src/apis.js (or @src/apis.ts for TypeScript).

   // In src/apis.js or src/apis.ts
   export const myApiMiddlewareFn = (config) => {
     return config;
   };

   // In src/apis.js or src/apis.ts
   export const myApiMiddlewareFn = (config) => {
     return config;
   };

3. Global Middleware Customization: If you want to modify CORS settings globally, you need to make changes in two places: a. In your main.wasp file:

   // In main.wasp
   app todoApp {
     server: {
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

   // In main.wasp
   app todoApp {
     server: {
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

b. In a new or existing JavaScript/TypeScript file in your src directory. The example uses @src/serverSetup.js (or @src/serverSetup.ts for TypeScript):

   // In src/serverSetup.js or src/serverSetup.ts
   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
   }

   // In src/serverSetup.js or src/serverSetup.ts
   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
   }

Remember to choose either the API Namespace approach (#1 and #2) or the Global Middleware Customization approach (#3) based on your specific needs. The API Namespace approach is more targeted and applies only to specific API routes, while the Global Middleware Customization applies to all routes. After making these changes, make sure to restart your Wasp application for the changes to take effect. Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works) and Configuring Middleware documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware) provide more details on these configurations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wbjb, 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?

miho•3w ago

@wbjb do you need a human to help as well? 🙂

wbjbOP•3w ago

Hey! Thanks for offering. I've got everything figured out from the docs and the help from kapa. I'll tag you the next time though!

Gaming

Programming

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this errorAI:3001/auth/me:1

Did you find this page helpful?