Wasp-lang•2mo ago

CORS issue on authentication

I have a server set up with the API running on port 448 (https). I'm getting this error: Access to XMLHttpRequest at 'https://thehatchery.io:448/auth/me' from origin 'https://thehatchery.io' 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.

3 Replies

kapa.ai•2mo ago

Hi @cmilazzo. 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 encountering a CORS (Cross-Origin Resource Sharing) issue. This is a common problem when a web application tries to access resources from a different origin (domain, protocol, or port) from its own. In the context of Wasp, there have been similar issues reported by other users. For instance, one user reported a similar problem when trying to use the Api.post on a custom HTTP endpoint, resulting in a CORS error. The error message was similar to yours, indicating that the 'Access-Control-Allow-Origin' header was not present on the requested resource (source (https://github.com/wasp-lang/wasp/issues/1757)). Another user reported a similar issue when trying to share their app using ngrok, with the error occurring on the auth/me endpoint (source (https://discord.com/channels/686873244791210014/1218081390176763914)). Unfortunately, the provided knowledge sources do not contain a direct solution to your problem. However, it's clear that this is a known issue within the Wasp community, and the team is aware of it (source (https://github.com/wasp-lang/wasp/issues/1303)). As a workaround, you might want to check your server's CORS configuration to ensure that it allows requests from the origin 'https://thehatchery.io'. This typically involves setting the 'Access-Control-Allow-Origin' header to the origin that should be allowed to access the server. For more detailed help, I would recommend reaching out to the Wasp community directly, either through their GitHub issues (https://github.com/wasp-lang/wasp/issues) or Discord server (https://discord.com/invite/rzdnErX). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmilazzo, 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?

cmilazzoOP•2mo ago

@kapa.ai how do I set up CORS on the API server?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To set up CORS on the API server in Wasp, you can define custom middleware for your APIs in the Wasp file. Here's an example of how you can do this:

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

And then in the implementation file:

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

In this example, apiNamespace is a simple declaration used to apply some middlewareConfigFn to all APIs under some specific path. The apiMiddleware function in the implementation file is returning the default middleware which enables CORS for all APIs under the /foo path (source (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works)). If you want to modify the middleware for all operations and APIs, you can do something like this:

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

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

And in the server setup file:

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this example, the serverMiddlewareFn function is modifying the middleware to add extra domains to CORS (source (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware)). Remember to replace '<https://example1.com'> and '<https://example2.com'> with the actual domains you want to allow. Please note that these are just examples and you might need to adjust them according to your specific needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmilazzo, 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?

Gaming

Programming

CORS issue on authentication