HueInDaHaus Comments - Answer Overflow

HueInDaHaus

•Created by HueInDaHaus on 8/2/2023 in #workers-help

R2 bound worker + service worker with image resizing does not work

Ok maybe I've figured out something. According to https://developers.cloudflare.com/images/image-resizing/troubleshooting/ it says "There is another Worker running on the same request. Resizing is “forgotten” as soon as one Worker calls another. Do not use Workers scoped to the entire domain /*." Does that mean that any fetch via service binding workers will prompt the resizing to be "forgotten" or whatever it means? Can someone clarify? When i set the R2 bound worker to a public route and call it not using env.SERVER.fetch but instead only fetch it seems to work.

5 replies

CDCloudflare Developers

•Created by HueInDaHaus on 8/2/2023 in #workers-help

R2 bound worker + service worker with image resizing does not work

And yes I have a pro plan and activated the image optimization functionality

5 replies

CDCloudflare Developers

•Created by HueInDaHaus on 8/2/2023 in #workers-help

R2 bound worker + service worker with image resizing does not work

Worker script:

export interface Env {
    SERVE: Fetcher,
    WORKER_API_KEY: string | undefined
}

function auth(request: Request, env: Env) {
    return request.headers.get("X-Api-Key") === env.WORKER_API_KEY
}

export default {
    async fetch(request: Request, env: Env, ctx: ExecutionContext) {
        
        if (!auth(request, env)){
            return new Response('Unauthorized', {
                status: 401
            })
        }
        

        let url = new URL(request.url)

        // Cloudflare-specific options are in the cf object.
        let options = { cf: { image: {} } }

        // Copy parameters from query string to request options.
        // You can implement various different parameters here.
        if (url.searchParams.has("width")) options.cf.image["width"] = parseInt(url.searchParams.get("width"))
        if (url.searchParams.has("height")) options.cf.image["height"] = parseInt(url.searchParams.get("height"))
        if (url.searchParams.has("quality")) options.cf.image["quality"] = parseInt(url.searchParams.get("quality"))

        // Your Worker is responsible for automatic format negotiation. Check the Accept header.
        const accept = request.headers.get("Accept");
        if (/image\/avif/.test(accept)) {
            options.cf.image["format"] = 'avif';
        } else if (/image\/webp/.test(accept)) {
            options.cf.image["format"] = 'webp';
        }

        // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
        // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
        if (!/\.(jpe?g|png|webp)$/i.test(url.pathname)) {
            return new Response('Disallowed file extension', { status: 400 })
        }

        return await env.SERVE.fetch(request, options)
    },
};

export interface Env {
    SERVE: Fetcher,
    WORKER_API_KEY: string | undefined
}

function auth(request: Request, env: Env) {
    return request.headers.get("X-Api-Key") === env.WORKER_API_KEY
}

export default {
    async fetch(request: Request, env: Env, ctx: ExecutionContext) {
        
        if (!auth(request, env)){
            return new Response('Unauthorized', {
                status: 401
            })
        }
        

        let url = new URL(request.url)

        // Cloudflare-specific options are in the cf object.
        let options = { cf: { image: {} } }

        // Copy parameters from query string to request options.
        // You can implement various different parameters here.
        if (url.searchParams.has("width")) options.cf.image["width"] = parseInt(url.searchParams.get("width"))
        if (url.searchParams.has("height")) options.cf.image["height"] = parseInt(url.searchParams.get("height"))
        if (url.searchParams.has("quality")) options.cf.image["quality"] = parseInt(url.searchParams.get("quality"))

        // Your Worker is responsible for automatic format negotiation. Check the Accept header.
        const accept = request.headers.get("Accept");
        if (/image\/avif/.test(accept)) {
            options.cf.image["format"] = 'avif';
        } else if (/image\/webp/.test(accept)) {
            options.cf.image["format"] = 'webp';
        }

        // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
        // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
        if (!/\.(jpe?g|png|webp)$/i.test(url.pathname)) {
            return new Response('Disallowed file extension', { status: 400 })
        }

        return await env.SERVE.fetch(request, options)
    },
};

5 replies

Gaming

Programming