Wasp•3d ago

api error

im getting a cors error in the browser console. the api is for fetching blog posts. Access to fetch at 'http://localhost:3001/posts' 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.Understand this error service-worker.js:22 Uncaught (in promise) TypeError: Failed to fetch at service-worker.js:22:32Understand this error Access to fetch at 'http://localhost:3001/posts' 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.Understand this error service-worker.js:22 Uncaught (in promise) TypeError: Failed to fetch at service-worker.js:22:32Understand this error hook.js:608 Failed to load posts: AxiosError overrideMethod @ hook.js:608Understand this error :3001/posts:1 Failed to load resource: net::ERR_FAILED

7 Replies

kapa.ai•3d ago

Hi @Bruno Njeru. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The CORS error you're seeing means that your browser is blocking requests from your frontend (http://localhost:3000) to your backend API (http://localhost:3001/posts) because the backend is not sending the required Access-Control-Allow-Origin header in its response. This is a common issue when developing with separate frontend and backend servers. Why this happens:
Browsers enforce the Same-Origin Policy for security. When your frontend tries to fetch data from a different origin (different port counts as a different origin), the browser sends a "preflight" OPTIONS request to the backend. If the backend doesn't respond with the correct CORS headers, the browser blocks the request. How to fix in Wasp:
Wasp uses Express and includes CORS middleware by default, but for custom APIs or certain endpoints, you may need to explicitly configure CORS. Steps to resolve: 1. Ensure CORS is enabled for your endpoint.
If you are using custom HTTP APIs, you need to make sure CORS is configured for them. You can do this by defining a middleware configuration in your Wasp project. Example for global CORS config in main.wasp and src/serverSetup.js:

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

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

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

   // src/serverSetup.js
   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 ensures CORS is enabled for requests from your frontend URL and localhost:3000, which is typical for development environments Configuring Middleware. 2. If using custom API endpoints:
For custom APIs, you may need to use an apiNamespace and apply a middleware config function to ensure CORS is enabled for those routes:

   apiNamespace blogApi {
     middlewareConfigFn: import { blogApiMiddleware } from "@src/apis",
     path: "/posts"
   }

   apiNamespace blogApi {
     middlewareConfigFn: import { blogApiMiddleware } from "@src/apis",
     path: "/posts"
   }

   // src/apis.js
   import cors from 'cors'
   export const blogApiMiddleware = (config) => {
     config.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return config
   }

   // src/apis.js
   import cors from 'cors'
   export const blogApiMiddleware = (config) => {
     config.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return config
   }

Making Sure CORS Works 3. Restart your Wasp server after making these changes. Summary:
The error is due to missing CORS headers on your backend. You need to configure CORS in your Wasp app, either globally or for your specific API namespace, to allow requests from your frontend's origin. If you continue to have issues, double-check that your middleware is being applied before your routes are registered, as the order can affect CORS handling Github Issue #1757. Let me know if you need help with the exact code for your setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?

Bruno NjeruOP•3d ago

@kapa.ai here is the error after adding the headers The FetchEvent for "http://localhost:3001/posts" resulted in a network error response: the promise was rejected. Promise.then (anonymous) @ service-worker.js:20Understand this warning service-worker.js:22 Uncaught (in promise) TypeError: Failed to fetch at service-worker.js:22:32 (anonymous) @ service-worker.js:22 Promise.then (anonymous) @ service-worker.js:21Understand this error Blog.tsx:31 Failed to load posts: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}event: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/node_modules/.vite/deps/axios.js?v=7e8b87ba:1624:19)\n at Axios.request (http://localhost:3000/node_modules/.vite/deps/axios.js?v=7e8b87ba:2201:41)\n at async blogPosts (http://localhost:3000/@fs/home/guinness/PetTreat/pets/app/src/landing-page/components/Blog.tsx:21:15)\n at async loadPosts (http://localhost:3000/@fs/home/guinness/PetTreat/pets/app/src/landing-page/components/Blog.tsx:30:22)"[[Prototype]]: Error overrideMethod @ hook.js:608 loadPosts @ Blog.tsx:31 await in loadPosts (anonymous) @ Blog.tsx:34 commitHookEffectListMount @ chunk-FNPS55QW.js?v=7e8b87ba:16963 commitPassiveMountOnFiber @ chunk-FNPS55QW.js?v=7e8b87ba:18206 commitPassiveMountEffects_complete @ chunk-FNPS55QW.js?v=7e8b87ba:18179

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The new error message you’re seeing—“The FetchEvent for 'http://localhost:3001/posts' resulted in a network error response: the promise was rejected”—along with Axios reporting a "Network Error", indicates that the browser is unable to reach your backend at all, not just a CORS issue. What this means:
A "Network Error" from Axios (and a failed fetch in the service worker) usually means one of the following: - The backend server at http://localhost:3001 is not running, or is not accessible from your frontend. - There is a firewall, proxy, or Docker/network configuration issue blocking the request. - The server crashed or is not listening on the expected port. - The service worker is intercepting the request and failing to handle it properly. What to check: 1. Is your backend running?
Make sure your Wasp server is running and listening on port 3001. You should be able to open http://localhost:3001/posts in your browser and get a response (even if it’s an error, it should not be a network error). 2. Is the port correct?
Double-check that your frontend is trying to reach the correct port and that nothing else is using port 3001. 3. Are you running in a special environment (Docker, VM, Gitpod, etc.)?
If so, you may need to expose ports or set environment variables like REACT_APP_API_URL and WASP_WEB_CLIENT_URL to the correct URLs, as discussed in the knowledge sources. For example, in Gitpod, you need to open the 3001 port and set these environment variables to match your client and server URLs Discord Gitpod thread. 4. Service Worker interference:
If you have a service worker (as indicated by the error in service-worker.js), try disabling it or unregistering it in your browser’s devtools to see if the error persists. Sometimes, a misconfigured service worker can block or mishandle network requests. 5. Check for server errors:
Look at your backend server logs/terminal for any errors when you try to make the request. 6. CORS configuration:
If you recently changed CORS settings, make sure the server restarted and that the middleware is applied before your routes are registered. If CORS is not set up correctly, you may see CORS errors, but a pure "Network Error" usually means the request isn’t reaching the server at all Github Issue #1757. Summary:
This is likely not a CORS error anymore, but a connectivity issue between your frontend and backend. Double-check that your backend is running and accessible, and that your service worker (if present) is not interfering. If you’re using a special environment (like Docker or Gitpod), ensure ports are exposed and environment variables are set correctly. If you need more help, please provide details about your environment (local, Docker, Gitpod, etc.) and whether you can access http://localhost:3001/posts directly in your browser. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?

Bruno NjeruOP•3d ago

i removed the serviceworker @kapa.ai but im still getting an error Access to XMLHttpRequest at 'http://localhost:3001/posts' 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.Understand this error hook.js:608 Failed to load posts: AxiosError overrideMethod @ hook.js:608Understand this error :3001/posts:1 Failed to load resource: net::ERR_FAILEDUnderstand this error (index):1 Access to XMLHttpRequest at 'http://localhost:3001/posts' 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.Understand this error hook.js:608 Failed to load posts:

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error message you are seeing:

Access to XMLHttpRequest at 'http://localhost:3001/posts' 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.

means that your backend server at http://localhost:3001 is not sending the required CORS headers in its response, so the browser is blocking the request from your frontend at http://localhost:3000. How to fix this in Wasp: 1. Custom API Endpoints Need Explicit CORS Middleware
If you are using custom HTTP API endpoints in Wasp, you must explicitly enable CORS for those endpoints. By default, Wasp does not apply global middleware (like CORS) to custom APIs, so you need to configure it yourself. 2. How to Enable CORS for Custom APIs
You can use an apiNamespace in your main.wasp file and apply a middleware config function that enables CORS for the relevant path. For example:

   apiNamespace blogApi {
     middlewareConfigFn: import { blogApiMiddleware } from "@src/apis",
     path: "/posts"
   }

   apiNamespace blogApi {
     middlewareConfigFn: import { blogApiMiddleware } from "@src/apis",
     path: "/posts"
   }

And in your src/apis.js (or .ts):

   import cors from 'cors'
   export const blogApiMiddleware = (config) => {
     config.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return config
   }

   import cors from 'cors'
   export const blogApiMiddleware = (config) => {
     config.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return config
   }

This will ensure that requests from your frontend (localhost:3000) are allowed by the backend Making Sure CORS Works. 3. Restart Your Wasp Server
After making these changes, restart your Wasp server to apply the new middleware configuration. 4. If You Want to Set CORS Globally
You can also set CORS globally for all endpoints by configuring the server middleware in your main.wasp and src/serverSetup.js as described here: Customize Global Middleware. Summary:
Your error is because CORS is not enabled for your custom API endpoint. You need to explicitly configure CORS for your custom APIs in Wasp using middleware, as shown above. Once you do this and restart your server, the error should be resolved. If you still have issues after this, please check your backend logs for any errors and ensure the middleware is being applied before your routes are registered. If you need more help, let me know your exact main.wasp and middleware setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?

Filip•3d ago

Hey @Bruno Njeru, ping me if you need human help with this 🙂

Bruno NjeruOP•2d ago

its solved @sodic

Gaming

Programming

api error

Did you find this page helpful?