Wasp•7mo ago

CORS Issues

Access to XMLHttpRequest at 'https://api.myapp.com/auth/exchange-code' from origin 'https://app.myapp.com' 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.

api.myapp.com/auth/exchange-code:1 
Failed to load resource: net::ERR_FAILED

My main.wasp:

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

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

My serverSetup:

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

export const serverMiddlewareFn = (middlewareConfig: any) => {
  middlewareConfig.set('cors', cors({
    origin: [
      'https://app.myapp.com',
      'https://api.myapp.com',
      'http://localhost:3000',
      'http://localhost:6274',
      'http://127.0.0.1:6274'
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

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

export const serverMiddlewareFn = (middlewareConfig: any) => {
  middlewareConfig.set('cors', cors({
    origin: [
      'https://app.myapp.com',
      'https://api.myapp.com',
      'http://localhost:3000',
      'http://localhost:6274',
      'http://127.0.0.1:6274'
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

15 Replies

kapa.ai•7mo ago

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I see you're experiencing CORS issues with your Wasp application. This is a common challenge when working with custom API endpoints. The issue appears to be that your CORS configuration isn't properly handling preflight requests for your API endpoints. While you've configured global middleware correctly, there are a few potential issues: 1. API Endpoints Need Special CORS Handling: Custom API endpoints in Wasp don't automatically use the global middleware in the same way operations do. This is a known issue in Wasp. 2. Missing OPTION Route Handling: For complex CORS requests (like those with custom headers), browsers send preflight OPTIONS requests that need to be properly handled. The recommended solution is to use apiNamespace to properly configure CORS for your API routes:

// In your main.wasp file
apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

// In your main.wasp file
apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

Then in your serverSetup file, add the namespace middleware function:

export const authNamespaceMiddlewareFn = (middlewareConfig: any) => {
  // You can use the same CORS configuration you already have
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

export const authNamespaceMiddlewareFn = (middlewareConfig: any) => {
  // You can use the same CORS configuration you already have
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

This approach ensures that both the actual API requests and the preflight OPTIONS requests are properly handled with CORS headers. This is a known issue in Wasp that has been documented in Github Issue #1303 and discussed in Github Issue #1757. The Wasp team is aware that the current API for handling CORS with custom endpoints can be confusing. For more information on configuring middleware in Wasp, you can refer to the Middleware Configuration documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

@kapa.ai but this is not a custom API endoint, it's from the Google Social Auth, it fails

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see, thank you for clarifying that this is related to Google Social Auth rather than a custom API endpoint. This changes the approach we need to take. For Google Social Auth in Wasp, CORS issues can still occur, especially in production environments. Since this is happening with the built-in auth routes (/auth/exchange-code), we need to ensure proper CORS configuration for the authentication system. Looking at your specific error, it appears that the preflight request for the authentication endpoint isn't receiving the proper CORS headers. Here are some approaches to fix this: 1. Server Configuration Object: You can specify the client URL in your server configuration to help Wasp properly configure CORS:

// In your main.wasp file
app myApp {
  // ...other config
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup"
  },
}

// In your main.wasp file
app myApp {
  // ...other config
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup"
  },
}

2. Environment Variables: Make sure you've set the proper environment variables for your production deployment. For the client, you need to set REACT_APP_API_URL to point to your server URL. 3. Global Middleware Approach: Your current approach with serverMiddlewareFn should work for auth routes too, but you might need to ensure it's being applied correctly:

export const serverMiddlewareFn = (middlewareConfig: any) => {
  // Make sure to replace the existing cors middleware
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
  }))
  return middlewareConfig
}

export const serverMiddlewareFn = (middlewareConfig: any) => {
  // Make sure to replace the existing cors middleware
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
  }))
  return middlewareConfig
}

This is a known issue that has affected other Wasp users working with social auth in production environments, as seen in some of the Discord support threads and GitHub issues. The Wasp team is aware of these CORS configuration challenges. If you're still experiencing issues after trying these approaches, you might need to check your deployment configuration and ensure that your server is correctly configured to handle the authentication routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

Ok @kapa.ai , let's think. The scenario is that I have server (api.) and the db in Railway and the webpp (app.) in Cloudflare. The error happens when I try to login with Google and it redirects to the callback url (Unable to login with the OAuth provider.). In the console it gives: Access to XMLHttpRequest at 'https://api.myapp.com/auth/exchange-code' from source 'https://app.myapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 'Access-Control-Allow-Origin' header is not present in the requested resource. Error loading resource: net::ERR_FAILED - api.myapp.com/auth/exchange-code:1. It is the opensaas template. what is happening? When I deployed everything in Fly it didn't happen (although this is another app).

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your issue better now. You're using the OpenSaaS template with a split deployment - server on Railway and frontend on Cloudflare - and experiencing CORS issues specifically with Google OAuth. This is a common issue when deploying Wasp apps across different domains. The problem occurs because the preflight OPTIONS request to your auth endpoint isn't receiving the proper CORS headers. Based on the knowledge sources, there are a few potential solutions: 1. CORS Configuration: The OpenSaaS template should have CORS configured, but it might need adjustments for your specific deployment setup. Make sure your server middleware properly sets CORS headers for all auth routes:

export const serverMiddlewareFn = (middlewareConfig: any) => {
  // Place cors() at the beginning of middleware chain
  middlewareConfig.set('cors', cors({
    origin: ['<https://app.myapp.com'],>
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

export const serverMiddlewareFn = (middlewareConfig: any) => {
  // Place cors() at the beginning of middleware chain
  middlewareConfig.set('cors', cors({
    origin: ['<https://app.myapp.com'],>
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }))
  return middlewareConfig
}

2. Environment Variables: Make sure you've set the proper environment variables: - On your client (Cloudflare), set REACT_APP_API_URL=<https://api.myapp.com> - On your server (Railway), make sure any necessary auth-related environment variables are set 3. Domain Configuration: The split deployment across different domains (app.myapp.com and api.myapp.com) might be causing issues. When you deployed everything to Fly, it likely worked because everything was under the same domain. This appears to be a known issue with Wasp's CORS handling, especially for auth routes. As mentioned in GitHub Issue #1303, there are ongoing efforts to improve the CORS + API story in Wasp. If the above solutions don't work, you might need to consider: - Using a proxy on Cloudflare to route API requests - Deploying both client and server to the same domain - Adding an apiNamespace specifically for auth routes with proper CORS configuration Let me know if you need more specific guidance on any of these approaches. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

@kapa.ai Now I don't have any middleware aplying, give me the files with full content and update in main.wasp to add the middleware

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll provide you with the complete files you need to implement proper CORS middleware for your Wasp application with the OpenSaaS template. This should help resolve the Google OAuth CORS issues you're experiencing between your Railway server and Cloudflare frontend. First, let's update your main.wasp file:

app myApp {
  // ... your existing app configuration ...
  
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup"
  },
  
  // Add this apiNamespace for auth routes
  apiNamespace auth {
    middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
    path: "/auth"
  }
}

// ... rest of your main.wasp file ...

app myApp {
  // ... your existing app configuration ...
  
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup"
  },
  
  // Add this apiNamespace for auth routes
  apiNamespace auth {
    middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
    path: "/auth"
  }
}

// ... rest of your main.wasp file ...

Now, let's create a complete serverSetup.ts file:

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

// This function is for any server setup you might need
export const serverSetup: ServerSetupFn = async (app) => {
  // Any additional server setup can go here
  console.log('Server setup complete');
};

// Global middleware configuration
export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS for all routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }));
  
  return middlewareConfig;
};
// Specific middleware for auth routes
export const authNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS specifically for auth routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<http://localhost:3000'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    // Ensure preflight requests are handled correctly
    preflightContinue: false,
    optionsSuccessStatus: 204
  }));
  
  return middlewareConfig;
};

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

// This function is for any server setup you might need
export const serverSetup: ServerSetupFn = async (app) => {
  // Any additional server setup can go here
  console.log('Server setup complete');
};

// Global middleware configuration
export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS for all routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274',>
      '<http://127.0.0.1:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization', 
      'X-Device-ID',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
  }));
  
  return middlewareConfig;
};
// Specific middleware for auth routes
export const authNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS specifically for auth routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<http://localhost:3000'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    // Ensure preflight requests are handled correctly
    preflightContinue: false,
    optionsSuccessStatus: 204
  }));
  
  return middlewareConfig;
};

This configuration does a few important things: 1. It sets up global CORS middleware for all routes 2. It creates a specific CORS configuration for auth routes using apiNamespace 3. It properly handles preflight OPTIONS requests which are critical for OAuth flows The apiNamespace approach is particularly important for auth routes as mentioned in the Wasp documentation on making sure CORS works. This ensures that both the actual requests and preflight OPTIONS requests are properly handled. Make sure to adjust the origin URLs to match your exact domains. After implementing these changes, your Google OAuth flow should work correctly between your Railway backend and Cloudflare frontend. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

@kapa.ai ❌ --- [Error] Your wasp project failed to compile: ------------------------------- - /home/rootall/apps/AI-Doc-Chat/AI-Doc-Chat/app/main.wasp @ 107:22 Parse error: Unexpected token: { Expected one of the following tokens instead: '}',',' 106 | // Add this apiNamespace for auth routes 107 | apiNamespace: auth { 108 | middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup", - /home/rootall/apps/AI-Doc-Chat/AI-Doc-Chat/app/main.wasp @ 108:23 Parse error: Unexpected token: : Expected one of the following tokens instead: <identifier> 107 | apiNamespace: auth { 108 | middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup", 109 | path: "/auth", - /home/rootall/apps/AI-Doc-Chat/AI-Doc-Chat/app/main.wasp @ 108:25-30 Parse error: Unexpected token: import Expected one of the following tokens instead: <identifier>,<eof> 107 | apiNamespace: auth { 108 | middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup", 109 | path: "/auth", - /home/rootall/apps/AI-Doc-Chat/AI-Doc-Chat/app/main.wasp @ 108:32 Parse error: Unexpected token: { Expected one of the following tokens instead: <eof> 107 | apiNamespace: auth { 108 | middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup", 109 | path: "/auth", ❌ --- [Error] Building of wasp project failed: -------------------------------- 4 errors found. app MyApp{ wasp: { version: "^0.16.2" }, server: { setupFn: import { serverSetup } from "@src/server/serverSetup", middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup", },
// Add this apiNamespace for auth routes apiNamespace: auth { middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup", path: "/auth", } }

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue with your main.wasp file. There's a syntax error in how you're declaring the apiNamespace. In Wasp, declaration types like apiNamespace are not properties of the app declaration but are separate top-level declarations. Here's how to fix your main.wasp file:

app MyApp {
  wasp: {
    version: "^0.16.2"
  },

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

// Add this apiNamespace for auth routes as a separate declaration
apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

app MyApp {
  wasp: {
    version: "^0.16.2"
  },

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

// Add this apiNamespace for auth routes as a separate declaration
apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

The key changes are: 1. Removed the colon after apiNamespace 2. Moved the apiNamespace declaration outside of the app declaration 3. Made it a top-level declaration like other Wasp declarations According to the Wasp Language documentation, apiNamespace is a declaration type, similar to app, page, or route. These declarations should be at the top level of your main.wasp file, not nested inside other declarations. This syntax is also shown in the Middleware Configuration documentation where apiNamespace is used as a top-level declaration. After making these changes, your Wasp project should compile successfully. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

@kapa.ai create me server setup but adding api.myapp.com and just put the allowedHeaders by default by wasp just the neccesary, for example, X-Device-ID it's for my Chrome extension so this should NOT be.

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll create a server setup file for you that includes api.myapp.com in the allowed origins and only includes the necessary headers that Wasp uses by default, without the custom X-Device-ID header. Here's the complete serverSetup.ts file:

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

// Server setup function
export const serverSetup: ServerSetupFn = async (app) => {
  // Any additional server setup can go here
  console.log('Server setup complete');
};

// Global middleware configuration
export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS for all routes with only necessary headers
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ]
  }));
  
  return middlewareConfig;
};

// Specific middleware for auth routes
export const authNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS specifically for auth routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    preflightContinue: false,
    optionsSuccessStatus: 204
  }));
  
  return middlewareConfig;
};

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

// Server setup function
export const serverSetup: ServerSetupFn = async (app) => {
  // Any additional server setup can go here
  console.log('Server setup complete');
};

// Global middleware configuration
export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS for all routes with only necessary headers
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000',>
      '<http://localhost:6274'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ]
  }));
  
  return middlewareConfig;
};

// Specific middleware for auth routes
export const authNamespaceMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Configure CORS specifically for auth routes
  middlewareConfig.set('cors', cors({
    origin: [
      '<https://app.myapp.com',>
      '<https://api.myapp.com',>
      '<http://localhost:3000'>
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type', 
      'Authorization',
      'Accept',
      'Origin',
      'X-Requested-With'
    ],
    preflightContinue: false,
    optionsSuccessStatus: 204
  }));
  
  return middlewareConfig;
};

This configuration: 1. Includes 'https://api.myapp.com' in the allowed origins 2. Only includes the standard headers that Wasp uses by default 3. Removes the X-Device-ID header as requested 4. Provides specific configuration for auth routes to handle preflight requests properly Remember to ensure your main.wasp file has the proper declarations:

app MyApp {
  // ... other config ...
  
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup",
  }
}

apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

app MyApp {
  // ... other config ...
  
  server: {
    setupFn: import { serverSetup } from "@src/server/serverSetup",
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/server/serverSetup",
  }
}

apiNamespace auth {
  middlewareConfigFn: import { authNamespaceMiddlewareFn } from "@src/server/serverSetup",
  path: "/auth"
}

This should help resolve your CORS issues with Google OAuth between your Railway backend and Cloudflare frontend. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•7mo ago

Ok, doing a curl found the problem:

<!DOCTYPE html>
<head>
<title>Attention Required! | Cloudflare</title>
<h1 data-translate="block_headline">Sorry, you have been blocked</h1>
 <h2 class="cf-subheadline">You are unable to access</span>  
</div><!-- /.header -->

✅ And disabling the Cloudflare proxy solved the problem. I Will check what's happening, I remeber adding some WAF and security rules.

Filip•7mo ago

Hey @NEROX, check what I said here: https://discord.com/channels/686873244791210014/1374012707099115550/1374505937548873838. I think you ran into the same problem @Wasp Computer Persons Can we do something about this? We get many similar reports (users thinking they have a CORS problem when they're having a "server is erroring out" problem). Could we maybe "catch" (at least) 500 errors on the client and log something like "There's something wrong with the server" before triggering the browser's Same origin policy protections?

Carlos•7mo ago

Reposted this to wasp dev so we can have the discussion there https://discord.com/channels/686873244791210014/920312576133443634/1374630133435990026

NEROXOP•7mo ago

Yep, as I think yes. I had a kinda restrictive WAF rule in Cloudflare that was blocking. So I always saw only a CORS error. Cursor gave me the idea to try curl and it worked. The times I had cors problems were either because of an api or my chrome extension, which I solved by configuring cors. But here it was very strange to me that it was with the /auth path and login that are pre built with Wasp.

Gaming

Programming

CORS Issues

Did you find this page helpful?