Modify and add headers to the requestheader instead of the request response

[dmathieu1]

I’m trying to add trace-id headers to request entering my system. Ideally since Cloudflare is the front door it would do this for me. I don’t see standard or built in way to do this. I’ve went down the rabbit hole of getting a worker to add it inline before it makes it to my origin server

const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
  const response = await fetch(request);
  // Clone the response so that it's no longer immutable
  const newResponse = new Response(response.body, response);
  // Add a custom header with a value
  newResponse.headers.append('x-workers-hello', 'Hello from Cloudflare Workers');
  newResponse.headers.append('traceid', genRanHex(32));
  return newResponse;
}

i see it on the response header, but not the request header. I have a webserver that dumps request headers and i don’t see it there either. is there away to add it to the request header?

I can’t use this way https://developers.cloudflare.com/rules/transform/request-header-modification/ since Cloudflare doesn’t support generating a string in the format traceid wanted.

[Cyb3r-Jak3]

You aren’t editing the request, only the response
Check out this example:

https://developers.cloudflare.com/workers/examples/modify-request-property/

[dmathieu1]

It does seem i’m editing the response not the request. I’m trying to get this example working. My javascript is limited. so far i haven’t had any luck.

[KianNH]

@dmathieu1

I don’t see standard or built in way to do this

Transform Rules.

https://developers.cloudflare.com/rules/transform/request-header-modification/

@dmathieu1

It does seem i’m editing the response not the request.

Just add the headers like request.headers.append(‘foo’, ‘bar’) before you make the fetch request.

[dmathieu1]

thanks @KianNH which fetch are you referring too

in the example above would i move the event listener fech to the bottom? or do you mean the const response = await fetch(request);

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

[dmathieu1]

const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
});
async function handleRequest(request) {
  const newRequest = new Request(request)
  request.headers.append('x-workers-hello', 'Hello from Cloudflare Workers');
  request.headers.append('traceid', genRanHex(32));
  const response = await fetch(request);
  // Clone the response so that it's no longer immutable
  const newRequest = new Request(request.body, request);
  // Add a custom header with a value

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

just gives a 500

[KianNH]

@dmathieu1

});

You have a closing } when there’s no opening {

@dmathieu1

const newRequest

You’re declaring newRequest twice and there is no need for the second one.

const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');

async function handleRequest(request) {
  const newReq = new Request(request)

  newReq.headers.append('x-workers-hello', 'Hello from Cloudflare Workers');
  newReq.headers.append('traceid', genRanHex(32));

  return await fetch(newReq);
}

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