From the frontend? or backend? - Cloudflare Developers

© 2026 Hedgehog Software, LLC

More

Communities Docs About Terms Privacy

haz

Hhaz From the frontend? or backend?

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:02 PM

From the Worker.

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:02 PM

Wherever you're trying to send a request to which sounds like the Worker.

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:03 PM

Your Worker or backend or whatever needs to:

Reply to all OPTIONS requests with status code 200, anything in the body, and that above header set to
```
*
```
```
*
```
Reply to the POST request, if that's what you're trying to do, with your usual response but just add the above header as well

haz

H

hazOP•3/19/24, 1:04 PM

I see, so in my case I need to the above header to the ReactJS app I have running on the web calling the worker that is currently running (locally)

haz

H

hazOP•3/19/24, 1:06 PM

I have this in my worker

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

haz

H

hazOP•3/19/24, 1:07 PM

I use it like this

router.post("/add", async (res, req) => { return CustomResponse(myJSONPayload, 200) })

router.post("/add", async (res, req) => { return CustomResponse(myJSONPayload, 200) })

haz

Hhaz I use it like this `router.post("/add", async (res, req) => { return CustomRespo...

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:08 PM

Yeah. So that should work. The key is that the browser will send a "preflight" request before the regular one with a method of OPTIONS that you need to reply to as well as the POST. So:

Reply to the preflight OPTIONS with a 200 and those headers. Do this even if the user is unauthenticated or not allowed, because it allows the browser to read the response in any case.
Do your reply to the POST as normal with a normal body but add those headers as well.

haz

Hhaz I use it like this `router.post("/add", async (res, req) => { return CustomRespo...

Murder Chicken

M

Murder Chicken•3/19/24, 1:11 PM

Are you using

itty-router

itty-router

?

haz

H

hazOP•3/19/24, 1:11 PM

Yup

haz

H

hazOP•3/19/24, 1:11 PM

I also just added

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

Murder Chicken

M

Murder Chicken•3/19/24, 1:12 PM

They have tooling for this:

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

haz

H

hazOP•3/19/24, 1:13 PM

What if I want to allow all origins?

Murder Chicken

M

Murder Chicken•3/19/24, 1:13 PM

*

Murder Chicken

M

Murder Chicken•3/19/24, 1:14 PM

IIRC

haz

H

hazOP•3/19/24, 1:14 PM

['*'] or just '*'

['*'] or just '*'

Murder Chicken

M

Murder Chicken•3/19/24, 1:15 PM

Yup. https://itty.dev/itty-router/cors

haz

H

hazOP•3/19/24, 1:20 PM

[wrangler:err] Error: No fetch handler responded and no upstream to proxy to specified.

[wrangler:err] Error: No fetch handler responded and no upstream to proxy to specified.

vakno

V

vakno•3/19/24, 1:24 PM

hello. I need to change h2 titles to h3 on product category page.
The problem is all products are not loaded in the DOM at the start.
Each click on read more button loads additional products via ajax.
So my worker only changes title for page 1 products, next pages are not effected.
Looks like i would need to trigger on xhr requests.
Is this even possible?

vakno

Vvakno hello. I need to change h2 titles to h3 on product category page. The problem is...

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:26 PM

This would likely need to be done in the browser itself, not in the Worker.

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 1:26 PM

The Worker delivers the HTML but after that it has no control over the page, only the browser can change things at that point

Isaac McFadyen

IIsaac McFadyen This would likely need to be done in the browser itself, not in the Worker.

vakno

V

vakno•3/19/24, 1:28 PM

yeah thats what i thought. I cant solve this with a worker, thanks

Alisson Acioli

A

Alisson Acioli•3/19/24, 2:57 PM

Guys, does anyone know if I put assets in Workers they are charged?

Alisson Acioli

AAlisson Acioli Guys, does anyone know if I put assets in Workers they are charged?

Isaac McFadyen

I

Isaac McFadyen•3/19/24, 3:01 PM

If you embed them in Workers then no, but there's a max size limit of 25MB on the paid plan and 1MB on the free plan (for all assets + worker combined). If you upload them using the

[sites]

[sites]

attribute in wrangler.toml then yes, they're charged since that uploads them to Workers KV but there's no size limit that way except for the KV per-value limit.

haz

H

hazOP•3/19/24, 3:23 PM

BTW guys, for the problems I was having

hono

hono

was amazing than

itty

itty

for the routing and cors issue

Isaac McFadyen

IIsaac McFadyen If you embed them in Workers then no, but there's a max size limit of 25MB on th...

Alisson Acioli

A

Alisson Acioli•3/19/24, 5:16 PM

And is there any way I can put images to be loaded from the worker without using buckets or external links? I say this because I wanted, for example, to display an image directly in the worker (this image is currently in the same directory as my worker javascript file) or instead load javascript or css files without having to go to R2, for example. Would? Where would I find specific documentation for this?

bun

B

bun•3/19/24, 9:35 PM

@HardlyWorkin' can you explain what is

ctx.waitUntil

ctx.waitUntil

is for exactly in context of BetterKV?

bun

Bbun @HardlyWorkin' can you explain what is `ctx.waitUntil` is for exactly in contex...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:51 PM

BetterKV is able to serve a request from cache, while revalidating with KV. To allow you to respond as fast as possible, it uses

waitUntil

waitUntil

to ensure that it will keep running, even if you have returned a Response

bun

B

bun•3/19/24, 9:52 PM

does

bKv.put

bKv.put

revalidate values stored with the same key?

bun

Bbun does `bKv.put` revalidate values stored with the same key?

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:53 PM

Kind of? It puts the value into KV and the local cache, but that does not affect cache in another datacenter

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:54 PM

Which is why the revalidation system is used

bun

B

bun•3/19/24, 9:54 PM

if i change the value of a key, how do i assure the revalidation happens everywhere?

bun

Bbun if i change the value of a key, how do i assure the revalidation happens everywh...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:56 PM

You can't. It will happen eventually, but if you put a value in one datacenter, it can take ~60 seconds or so at a minimum to be visible globally

bun

B

bun•3/19/24, 9:56 PM

after client requests or will it happen automatically?

bun

Bbun after client requests or will it happen automatically?

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:56 PM

With BetterKV, or without?

bun

B

bun•3/19/24, 9:57 PM

with betterKV i think revalidation can happen throughout data centers cause you can just

cache.delete

cache.delete

or maybe even

cache.put

cache.put

does that for you (im testing that right now), but what about KV ?

bun

Bbun with betterKV i think revalidation can happen throughout data centers cause you ...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 9:59 PM

With BetterKV and no manual intervention, then it can take one request before it shows the new value(depending on whether or not the original is still in cache). For KV, it can be around a minute since the last access(or more, if you set the cacheTtl to be higher).

bun

B

bun•3/19/24, 10:01 PM

a minute is fine but how much longer can it take?

bun

B

bun•3/19/24, 10:01 PM

well i dont tihnk it matters if betterkv does invalidation by itself

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:01 PM

Basically, with KV, you can receive a value from two places:

KV Origin
KV Cache
The KV origin should always have the latest value globally(barring network issues). So, if your KV.get hits the origin, great! You got a fresh value!

The issue arrises when you hit the cache. The cache is generally faster at serving requests, but in return, until the cache expires, you will not see the new values.

bun

Bbun well i dont tihnk it matters if betterkv does invalidation by itself

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:02 PM

Yes, though note this happens after it first serves a request from cache(assuming it qualifies for revalidation).

bun

B

bun•3/19/24, 10:02 PM

so if i have a have a cacheTtl of like a year, betterkv will still invalidate after a single request?

bun

Bbun so if i have a have a cacheTtl of like a year, betterkv will still invalidate af...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:04 PM

Well... Derp. I just realised, that's what it should do...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:05 PM

BetterKV v2 was built to take advantage of KV v2, which also did background revalidation

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:05 PM

Thus, it sets the KV cacheTtlcacheTtl to a year.

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:05 PM

But, because KV v2 was set aside, now it will attempt to cache that stale value for a year, without revalidating...

Hello, I’m Allie!

H

Hello, I’m Allie!•3/19/24, 10:06 PM

Theoretically, it is still correct, if you are using KV v2.

bun

B

bun•3/19/24, 10:06 PM

set aside? i thought the current version is betterkv v2

bun

B

bun•3/19/24, 10:06 PM

since tere's a old.tsold.ts in the directory

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));