How to use withCors middleware

[georgeboot]

How should I use the withCors middleware? I am trying to call a Cloudflare Worker from a web app, but the browsers CORS is blocking the request.

I see there is a middleware, so I tried the following:

import { Router } from 'itty-router'
import { json } from 'itty-router-extras'
import { withCors } from 'itty-router-extras/middleware/withCors'

const router = Router()

export default {
    fetch: router.handle,
}

router.post('/scan', withCors, async (request, env) => {
    // stuff here

    return json({ success: true }, { status: 201 })
})

But this results in a (vague) error:

{
  "name":"TypeError",
  "message":"Failed to execute function: parameter 1 is not of type 'Response'.",
  "timestamp":1634115490880
}

[georgeboot]

How I solved it:

// corshelper.js
export const handleCors = (options = {}) => request => {
    const {
        origin = '*',
        methods = 'GET, POST, PATCH, DELETE',
        headers = 'referer, origin, content-type',
        maxAge = null,
        allowCredentials = false,
    } = options

    if (
        request.headers.get('Origin') !== null &&
        request.headers.get('Access-Control-Request-Method') !== null
    ) {
        const corsHeaders = {
            'Access-Control-Allow-Origin': origin,
            'Access-Control-Allow-Methods': methods,
            'Access-Control-Allow-Headers': headers,
        }

        if (allowCredentials) {
            corsHeaders['Access-Control-Allow-Credentials'] = 'true'
        }

        if (maxAge) {
            corsHeaders['Access-Control-Max-Age'] = maxAge
        }
        
        // Handle CORS pre-flight request.
        return new Response(null, {
            status: 204,
            headers: corsHeaders
        })
    }

    // Handle standard OPTIONS request.
    return new Response(null, {
        headers: {
            'Allow': `${methods}, HEAD, OPTIONS`,
        }
    })
}

export const wrapCorsHeader = (response, options = {}) => {
    const {
        origin = '*',
    } = options

    response.headers.set('Access-Control-Allow-Origin', origin)

    return response
}

// index.js
import { Router } from 'itty-router'
import { json } from 'itty-router-extras'
import { handleCors, wrapCorsHeader } from './corshelper'

const router = Router()

export default {
    fetch: router.handle,
}

router.options('/scan', handleCors({ methods: 'POST', maxAge: 86400 }))

router.post('/scan', async (request, env) => {
    // stuff here

    return wrapCorsHeader(
        json({ success: true }, { status: 201 })
    )
})

[ojknation]

Thanks @georgeboot, I have been on this issue for hours, worked perfectly!

[towfiqi]

Thanks so much for this @georgeboot