How to handle CORS?

[subhendukundu]

I have a filename getAllPosts in functions file.
Which return something like this

export default ({
  handler: async function ({ request }) {
   const data = await getData();
    return {
      data: data,
    }
  }
})

Now this works great in the same origin. But when I try to use the same API from anohter origin, it is yelling CORS errors.
What would be the best way to handle CORS in vitedge?

[frandiox]

You need to add the headers manually in your application. There's a generic tutorial for CF workers here.

In Vitedge you still have control over the worker entry point so you can do something like this:

import { handleEvent } from 'vitedge/worker'

addEventListener('fetch', (event) => {
    if (event.request.method === 'OPTIONS') {
      // Handle options request separately
      event.respondWith(
        new Response(null, {
          headers: { ...CORS_HEADERS, Allow: ALLOWED_METHODS },
        })
      )
    } else {
      // Let Vitedge handle normal requests and modify its response to include headers
      event.respondWith(
        handleEvent(event).then(response => {
          Object.entries(CORS_HEADERS).forEach(([key, value]) => {
            response.headers.set(key, value)
          })

          return response
        })
       )
    }
  })

As for the headers, it depends on your need but you can try with something like this (copied from a project I have):

const ALLOWED_METHODS = 'GET, POST, OPTIONS, PUT, PATCH'
const CORS_HEADERS = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': ALLOWED_METHODS,
  // iOS 12 is broken and doesn't accept only a wildcard, so specify here all the allowed headers:
  'Access-Control-Allow-Headers':
    '*, Accept, Content-Type, Content-Length, Accept-Encoding, Referer, Origin, User-Agent, authorization',

  'Access-Control-Allow-Credentials': 'true',

  // Set a cache for the OPTIONS check
  'Access-Control-Max-Age': '600',
}

--
Perhaps we should add this to Vitedge as an option where you just need to pass cors: true or cors: { headers } 🤔

[subhendukundu]

Yes, agreed! A really good option would be adding both of them. Giving developers flexibility. This reminds me this tweet thread

[frandiox]

Released in 0.13.0, please have a look at the docs!