Having issues with Worker stripping off response headers

Hello. I’m relatively new to Cloudflare. I’m running into an issue with my Worker that I’m hoping the Community has some suggestions on how to troubleshoot. I have 2 response headers (set at origin) that are getting stripped off my site and I’ve been able to verify the Worker is doing this by removing the route. The majority of my Worker is just doing Image Resizing (fairly small Worker code). I currently also have a Page Rule that is set to “cache everything” on the entire domain. I tried removing that as well, but the issue remains. Only bypassing the Worker allows the headers to show up from origin. Has anyone encountered this issue before? Please let me know what else I can provide to help narrow down the issue. Thanks!

What header is being stripped off?

It helps if you just post the Worker code (Remove anything sensitive).

I have a custom header called “image_na” that origin is sending. Below is my code. I’m wondering if this has something to do with the additional “image resizing” domain? I was told to use this by the Cloudflare support team to avoid image resizing errors (which does work).

addEventListener('fetch', async event => {
  event.respondWith(handleRequest(event))
  // if this request is coming from image resizing worker, avoid causing an infinite loop by resizing it again
  if (/image-resizing/.test(event.request.headers.get("via"))) {
    return fetch(event.request);
  }
})

/**
 * Respond to the request
 */
async function handleRequest(event) {

  let request = event.request
  let requestURL = new URL(request.url)
  let path = requestURL.pathname
  const localImageOrigin = 'image-origin.ourdomain.com'

  let cache = caches.default
  let response = await cache.match(request)  // Get the response (if any) from cache
  if (!response) {    // No response found in cache
    // set default image resizing options
    let resizeOptions = {
      quality: '85',
      format: 'webp',
      metadata: 'none'
    }

    // if the image is coming from the "image resize" origin domain, don't resize again
    if (request.headers.get('Host') === localImageOrigin) {
      return fetch(request)
    }

    // if the image is coming in via "www", change to the "image resize" origin domain
    requestURL.hostname = localImageOrigin

    // Build a request that passes through request headers, so that automatic format negotiation can work.
    const resizeRequest = new Request(requestURL, {
      headers: request.headers,
    })
    
    // fetch the image and resize
    let responses = await Promise.all([
      fetch(resizeRequest, { cf: { image: resizeOptions } } ),
      fetch(resizeRequest, { cf: { image: { quality: 85, format: "json" } } } )
    ])

    let clientResponse = await responses[0]
    clientResponse = new Response(responses[0].body, responses[0])

    return clientResponse
  }

  return response;
}

You have to retrieve the header from the Original response, then re-add them to the new response.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
  // Grab original header
  const custHeader = new Map(request.headers);
  // Create new headers object for Response
  const newHdrs = new Headers(request.headers);
  // Retrieve old header value and set to the new header
  newHdrs.set('image_na', custHeader.get('image_na'));
  // Return the response
  return new Response('OK', { status: 200, newHdrs });
}

Add that to a worker that has an actual domain (not dev) and you should see the image_na header in there.

1 Like

Thanks! I’ll give that a try!