Wasp-lang•20h ago

Can I disable cors on backend

I am using a nginx side car container to handle cors. However the server also tried to handle cors and it is sending multiple origins. I tried the middleware suggested in this and that doesn't work https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware I need to allow requests from https://youtube.com because the content script in the extension makes call from this domain

YouTube

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

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.

5 Replies

kapa.ai•20h ago

Hi @p4j4r5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the CORS settings in Wasp by modifying the global middleware. This will apply to all operations (query and action) and api. Here is an example of how you can modify the CORS settings to allow requests from <https://youtube.com:>

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

// 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://youtube.com']> }))  
 return middlewareConfig  
}

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

// 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://youtube.com']> }))  
 return middlewareConfig  
}

This will replace the default CORS middleware with a new one that allows requests from <https://youtube.com.> Please note that modifying global middleware should be done with extreme care as it will affect all operations and APIs. If you are unsure, consider using one of the other two options: per-api or per-path customization. For more information, please refer to the Wasp documentation on configuring middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @p4j4r5, 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?

p4j4r5•19h ago

Is the setupFN necessary? In the example above or in my case, I don't export this default setupFn: import setup from "@src/serverSetup", I am planning to use nginx for compression and other features. Handling cors using middle ware isn't working. I am doing exactly same thing as Bot suggested. Handling COR's on nginx is the other option I am pursuing. However there is no option for server not to setup CORS at all.

miho•19h ago

Handling cors using middle ware isn't working.

Are you sure you imported things correctly? The method below works for me. You can put * as the domain to allow any origin:

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

// src/serverSetup.js
import cors from 'cors'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: '*' }))
 return middlewareConfig  
}

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

// src/serverSetup.js
import cors from 'cors'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: '*' }))
 return middlewareConfig  
}

p4j4r5•15h ago

Yeah import looks all good. here is what I have

// src/serverSetup.js
import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
    // Example of adding an extra domains to CORS.

    middlewareConfig.set('cors', cors({
        origin: [config.frontendUrl, 'https://youtube.com']
    }))

    return middlewareConfig
}

and the main.wasp is as below

`  wasp: {
    version: "^0.14.0"
  },
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"

  },

miho•3h ago

If you are using nginx in front of the app, are you sure that the Origin header is getting forwarded to the app as you expect? Try using * as I suggested to make sure the most open configuration works. Then I'd log the Origin in a custom API endpoint and then I'd set the origin list to a list of domains.

Gaming

Programming

Can I disable cors on backend