cors support for route rules

[pi0]

Context: https://github.com/nuxt/framework/issues/4009

Proposal:

routes: {
  '/public': { cors: true }
}

We probably need an h3 utility for this as well: https://github.com/unjs/h3/issues/82

[ahku]

@pi0 What about enabling cors in general? I created another thread under Nuxt and the suggested approach was to create a Nitro plugin. I could however not get it to work the same way it works for express.

This is the code that works with an express server (notice the origin value set to localhost:3100). The client can access the end points just fine:

app.use(
  cors({
    origin: 'http://localhost:3100',
    credentials: true,
  })
)
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3100')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json'
  )
  next()
})

The corresponding Nitro plugin does not work. Maybe I messed up somewhere? The client app compains that the origin is set to '*' even though I set it to localhost:

import cors from 'cors'

export default defineNitroPlugin(({ h3App }) => {
  h3App.use(
    cors({
      origin: 'http://localhost:3100',
      credentials: true,
    })
  )
  h3App.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3100')
    res.header('Access-Control-Allow-Credentials', true)
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
    res.header(
      'Access-Control-Allow-Headers',
      'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json'
    )
    next()
  })
})

Any help would be appreciated.

[pi0]

We can globally enable it with routing rules too:

routes: {
  '/**': { cors: true }
}

[harryyaprakov]

Hey, is there any development on this? I am also struggling with cors and the options method.