Cloudflare Pages and Custom Headers

Hello. I’ve run into an issue with a website hosted via Cloudflare Pages where I receive the error:

Origin https://owc.io is not allowed by Access-Control-Allow-Origin

After reading a few posts here within the community I believe what’s suggested is to use a Cloudflare worker in front of the site but the part I’m failing to understanding is the process to do that. Would I generate a new worker folder with wrangler within my site or what would be the process of creating a worker to handle headers for a site hosted on Cloudflare Pages?

Any help/guidance on this is greatly appreciated!

I’m not sure what file(s) specifically you want to have CORS headers on but here is the process to adding it to them all:

Head on over to the Workers section (https://dash.cloudflare.com?to=/:account/workers/overview) and click “Create a Worker”

Then just paste in this code (replace everything already there):

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request)
      .catch((err) => new Response(err.stack, { status: 500 }))
    );
});

async function handleRequest(request) {
  const response = await fetch(request);
  const res = new Response(response.body, response);

  res.headers.append('Access-Control-Allow-Origin', '*');

  return res;
}

and now all responses will include the header Access-Control-Allow-Origin: *. If you wanted to add some other headers like Access-Control-Request-Headers simply add them just like Access-Control-Allow-Origin.

Once you’re happy you can deploy it (also feel free to rename it in the top left)

Then head over to your zone, click Workers (https://dash.cloudflare.com?to=/:account/:zone/workers) and then click “Add route”. Put in your route (owc.io/*) in this case and set the Worker to the one you just made

3 Likes

@Walshy thank you for walking me through the steps, this worked beautifully, thank you so much!

As an aside, any idea if custom headers will for sure be implemented in Pages in the future? Natively, I mean.

1 Like

Yes, I’m not sure the exact implementation but I’m pushing hard for a _headers file and/or a UI where you can easily just add headers in.

It won’t come for a little bit though as the team is working on other things currently. Functions should come pretty soon which will make this process easier. Then you could just add a function (Worker) to a folder like _functions and it’d work.

Lots to come in the Pages space, I’m super hyped for it.

You can also stay up to date on Discord: Cloudflare Workers

3 Likes

I’m would love to see a _headers file implementation or similar, this is actually what I’m use to using render/vercel/netlify. The whole infrastructure as code makes everything so much easier to work with and or collaborate on.

@Walshy is there a place to vote on the _headers suggestion by chance?

Thanks again for the suggestion above and the link to discord!

There isn’t like an “official” place but I know the teams look at the #feedback channel on Discord. The more people echoing and doing positive reactions on suggestions there is a big indicator for them.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.