W
Wasp•4w ago
mgp25

CORS issue - wasp 0.13

Basically we are getting a lot of CORS issues, such as: 
Failed to load resource: the server responded with a status of 401 ()
Origin https://wislearn.io is not allowed by Access-Control-Allow-Origin. Status code: 504
XMLHttpRequest cannot load https://api.wislearn.io/operations/process-task due to access control checks.
Failed to load resource: the server responded with a status of 401 ()
Origin https://wislearn.io is not allowed by Access-Control-Allow-Origin. Status code: 504
XMLHttpRequest cannot load https://api.wislearn.io/operations/process-task due to access control checks.
The following is in main.wasp: 
  wasp: {
    version: "^0.13.2"
  },
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
  wasp: {
    version: "^0.13.2"
  },
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
And serverSetup.ts content is: 
import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Set up CORS with allowed origins
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://api.wislearn.io', 'https://wislearn.io'] }));

  return middlewareConfig;
};
import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Set up CORS with allowed origins
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://api.wislearn.io', 'https://wislearn.io'] }));

  return middlewareConfig;
};
Pretty much as the guides and other examples shows. Any idea what could be happening? Best regards
4 Replies
kapa.ai
kapa.ai•4w ago
Hi @mgp25. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
MEE6
MEE6•4w ago
Wohooo @mgp25, you just became a Waspeteer level 2!
kapa.ai
kapa.ai•4w ago
---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your CORS issue in Wasp 0.13. First, it's important to note that CORS configuration in Wasp can be tricky, and there have been several issues and discussions about it. Your approach of using serverMiddlewareFn is generally correct, but there might be some nuances to consider. 1. CORS for OPTIONS requests: One common pitfall is that CORS needs to be set up not just for GET or POST requests, but also for OPTIONS requests. This is mentioned in a GitHub issue comment: GitHub Issue #1757 states: "I did a bit of digging and it seems we actually have confusing API here, and that the best way to get what you need here is by defining that middleware via apiNamespace Wasp feature, instead of defining it directly on the api." 2. Order of middleware: Another user in the same issue mentioned that the order of middleware registration might be important: "I couldn't fix this using wasp so I had to eject and specify app.use(cors()) before the router was registered. That fixed the cors issue so I think it's the order in which the middles are registered" 3. Checking server-side logs: It's also suggested to add console.log statements in your server-side code to see how far the request gets before throwing an error. This can help identify if the issue is actually CORS-related or if there's another error occurring earlier. 4. Using apiNamespace: Consider using the apiNamespace feature to configure CORS. This is mentioned in the Wasp documentation on making sure CORS works: 
apiNamespace fooBar {
  middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",
  path: "/foo"
}
apiNamespace fooBar {
  middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",
  path: "/foo"
}
5. Check your environment variables: Make sure that your config.frontendUrl is correctly set and matches your actual frontend URL. 6. Consider using the global middleware configuration: As an alternative approach, you could try using the global middleware configuration as shown in the Wasp documentation on customizing global middleware. If none of these suggestions resolve your issue, it might be worth creating a minimal reproducible example and sharing it with the Wasp team, as they've mentioned this is an area they're actively working on improving. Remember, CORS errors can sometimes be misleading and may actually be caused by other issues in your application. Double-check your server-side code for any potential errors that might be occurring before the CORS middleware is applied. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mgp25, 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?
mgp25
mgp25OP•4w ago
Adding a bit more context, its happening on an action: https://api.wislearn.io/operations/process-task

Did you find this page helpful?