W
Wasp3d ago
ayo

multiple client url

Does wasp support multiple frontend url for cors?
6 Replies
kapa.ai
kapa.ai3d ago
Hi @ayo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Wasp supports configuring multiple frontend URLs for CORS (Cross-Origin Resource Sharing). This can be done by customizing the global middleware configuration. Here's how you can achieve this: 1. In your main.wasp file, add a server configuration with a middlewareConfigFn:
app todoApp {
// ...
server: {
setupFn: import setup from "@src/serverSetup",
middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
},
}
app todoApp {
// ...
server: {
setupFn: import setup from "@src/serverSetup",
middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
},
}
2. In your src/serverSetup.js (or .ts) file, implement the serverMiddlewareFn:
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
}
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
}
This configuration allows CORS for the default frontend URL (specified by config.frontendUrl) and two additional domains: 'https://example1.com' and 'https://example2.com'. You can add as many origins as needed to the array passed to the cors function. For more detailed information on configuring middleware, you can refer to the Wasp documentation on Configuring Middleware. Remember to treat modifications to global middleware with care, as they will affect all operations and APIs in your Wasp application. Configuring Middleware ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ayo, 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?
ayo
ayoOP2d ago
I've follwed the docs here https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware the server starts but I get the follwoing error
[ Server!] TypeError: middlewareConfig.set is not a function
[ Server!] at setup (path/app/src/serverSetup.ts:6:20)
[ Server!] at startServer (path/canary/app/.wasp/out/server/src/server.ts:25:10)
[ Server!] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ Server!] TypeError: middlewareConfig.set is not a function
[ Server!] at setup (path/app/src/serverSetup.ts:6:20)
[ Server!] at startServer (path/canary/app/.wasp/out/server/src/server.ts:25:10)
[ Server!] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Configuring Middleware | Wasp
Wasp comes with a minimal set of useful Express middleware in every application. While this is good for most users, we realize some may wish to add, modify, or remove some of these choices both globally, or on a per-api/path basis.
genyus
genyus2d ago
Remove this line from main.wasp:
setupFn: import setup from "@src/serverSetup",
setupFn: import setup from "@src/serverSetup",
ayo
ayoOP21h ago
that worked @genyus . Hopefully not a lot of people spent the same time as I did tripping on the doc there.
genyus
genyus21h ago
Glad it helped. That line's apparently caught out a few folks, I raised a PR to fix it in the docs
MEE6
MEE621h ago
Wohooo @genyus, you just became a Waspeteer level 5!

Did you find this page helpful?