CD
Cloudflare Developers•7mo ago
Jonathan Riche

Static Assets Support in Workers

In cloudflare workers im doing something like the following to get static assets working with hono those work fine ie .css .js etc files are all routed correctly however for assets that are workers ie im using sqlocal and it needs the following headers 
c.req.raw.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
c.req.raw.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
c.req.raw.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
c.req.raw.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
But im not able to modify the raw headers i get a [ERROR] TypeError: Can't modify immutable headers. 
app.get('*', async (c) => {
    if (c.req.url.includes('worker')) {
        console.log('c.req.raw.headers', c.req.raw.headers);
        c.req.raw.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
        c.req.raw.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
        
    }

    return c.env.ASSETS.fetch(c.req.raw);
});
app.get('*', async (c) => {
    if (c.req.url.includes('worker')) {
        console.log('c.req.raw.headers', c.req.raw.headers);
        c.req.raw.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
        c.req.raw.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
        
    }

    return c.env.ASSETS.fetch(c.req.raw);
});
Is there a way to set headers for specific style of bundled assets(vite does the bundle)?
1 Reply
Jonathan Riche
Jonathan RicheOP•7mo ago
Figured out a fix... 
app.get('*', async (c) => {
    const response = await c.env.ASSETS.fetch(c.req.raw);

    // Check if the URL includes 'worker'
    if (c.req.url.includes('worker') || c.req.url.includes('sqlite3') ) { //or .wasm
        // Create a new response with the additional header
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: {
                ...Object.fromEntries(response.headers.entries()),
                'Cross-Origin-Embedder-Policy': 'require-corp',
                'Cross-Origin-Opener-Policy': 'same-origin',
            }
        });
    }

    return response;
});
app.get('*', async (c) => {
    const response = await c.env.ASSETS.fetch(c.req.raw);

    // Check if the URL includes 'worker'
    if (c.req.url.includes('worker') || c.req.url.includes('sqlite3') ) { //or .wasm
        // Create a new response with the additional header
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: {
                ...Object.fromEntries(response.headers.entries()),
                'Cross-Origin-Embedder-Policy': 'require-corp',
                'Cross-Origin-Opener-Policy': 'same-origin',
            }
        });
    }

    return response;
});
Had to create a seprate response type raw and copy over from the fetch as a variable*

Did you find this page helpful?