CORS issue

Hi I can't get around this error in production:

Access to XMLHttpRequest at 'https://skyber-academy-server.fly.dev/operations/get-waitlist-emails' from origin 'https://skyber-academy-client.fly.dev' 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.

Access to XMLHttpRequest at 'https://skyber-academy-server.fly.dev/operations/get-waitlist-emails' from origin 'https://skyber-academy-client.fly.dev' 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.

my app/src/server/utils.ts:

import cors from 'cors';
import { type MiddlewareConfigFn } from 'wasp/server';

export function requireNodeEnvVar(name: string): string {
  const value = process.env[name];
  if (value === undefined) {
    throw new Error(`Env var ${name} is undefined`);
  } else {
    return value;
  }
}

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // @ts-ignore
  middlewareConfig.set('cors', cors({ origin: [process.env.WASP_WEB_CLIENT_URL, 'http://localhost:3000'] }));
  return middlewareConfig;
};

import cors from 'cors';
import { type MiddlewareConfigFn } from 'wasp/server';

export function requireNodeEnvVar(name: string): string {
  const value = process.env[name];
  if (value === undefined) {
    throw new Error(`Env var ${name} is undefined`);
  } else {
    return value;
  }
}

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // @ts-ignore
  middlewareConfig.set('cors', cors({ origin: [process.env.WASP_WEB_CLIENT_URL, 'http://localhost:3000'] }));
  return middlewareConfig;
};

my main.wasp:

app SkyberAcademy {
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/utils"
  },
}

app SkyberAcademy {
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/utils"
  },
}

I deployed using wasp deploy fly deploy

4 Replies

kapa.ai•4d ago

Hi @linus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're experiencing a CORS (Cross-Origin Resource Sharing) issue. This typically happens when a web application tries to access resources from a different domain, protocol, or port than its own. In your serverMiddlewareFn function, you're setting the CORS middleware to allow requests from the WASP_WEB_CLIENT_URL environment variable and <http://localhost:3000.> This should allow your frontend to communicate with your backend. However, the error message suggests that the 'Access-Control-Allow-Origin' header is not present on the requested resource. This means that the server isn't allowing the client's origin. Here are a few things you can check: 1. Ensure that the WASP_WEB_CLIENT_URL environment variable is correctly set to the client's URL (<https://skyber-academy-client.fly.dev>). 2. Make sure that the server is correctly applying the CORS middleware. You can check this by inspecting the network traffic in your browser's developer tools and looking for the 'Access-Control-Allow-Origin' header in the server's responses. 3. If you're using custom HTTP API endpoints, you might need to enable CORS for those as well. Wasp allows you to define custom middleware for your APIs in the Wasp file using the apiNamespace declaration. You can find more information about this in the Wasp documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works). If you're still having trouble, it might be helpful to create a minimal example that reproduces the issue. This could help identify if the problem is with your specific application or with Wasp itself. You can also consider asking for help in the Wasp Discord community (https://discord.com/channels/686873244791210014/1223719089092956190) or opening an issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @linus, 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?

linus•4d ago

@Wasp Team I've tried doing

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Allow all domains for CORS
  middlewareConfig.set('cors', cors({
    origin: "*",  // Allows all domains
    credentials: true,  // Important for sessions or basic auth
    allowedHeaders: ['Content-Type', 'Authorization'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  }));
  return middlewareConfig;
};

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Allow all domains for CORS
  middlewareConfig.set('cors', cors({
    origin: "*",  // Allows all domains
    credentials: true,  // Important for sessions or basic auth
    allowedHeaders: ['Content-Type', 'Authorization'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  }));
  return middlewareConfig;
};

and reran wasp deploy fly deploy, still getting the CORS error. help, i've been stuck at this for 3 hours...

Vinny (@Wasp)•3d ago

Hey you don't need to set the middleware config like this. Wasp will do it for you. All you have to do is set the env variables correctly, which if you used wasp deploy then it should do it for you because your serverMiddlewareFn isn't doing anything that Wasp can't already do, you can just remove it try doing that and then runnn ing wasp deploy fly deploy again and let us know what happens are you using the Open SaaS template, by the way?

martinsos•2d ago

CORS error is sometimes just hiding another error. It might be that instead your server is erroring out due to missing env var or sometihgn like that.

Gaming

Programming

CORS issue