How do I disable CORS in CF workers ` has been blocked by CORS policy: No 'Access-Control-Allow-Orig

Hhaz How do I disable CORS in CF workers ` has been blocked by CORS policy: No 'Acces...

H

Serve an

Access-Control-Allow-Origin

Access-Control-Allow-Origin

Access-Control-Allow-Origin

Access-Control-Allow-Origin header?

H

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

You can just set it to

if you don't care about CORS, and your app doesn't need anything else

H

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

From the frontend? or backend?

Hhaz From the frontend? or backend?

I

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

From the Worker.

I

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

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

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

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)

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,
    });
};

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,
    });
};

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) })

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

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

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

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.

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

M

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

Are you using

itty-router

itty-router

itty-router

itty-router ?

H

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

Yup

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)

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)

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));

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));

H

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

What if I want to allow all origins?

M

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

*

M

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

IIRC

H

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

['*'] or just '*'

['*'] or just '*'

['*'] or just '*'

['*'] or just '*'

M

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

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

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.

[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.

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?

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

I

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

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

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

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

V

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

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

A

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

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

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

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]

[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.

H

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

BTW guys, for the problems I was having

hono

hono

was amazing than

itty

itty

itty

itty for the routing and cors issue

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

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?

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?

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

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

waitUntil

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

B

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

does

bKv.put

bKv.put

bKv.put

bKv.put revalidate values stored with the same key?

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

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

H

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

Which is why the revalidation system is used

B

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

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

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

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

B

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

after client requests or will it happen automatically?

Bbun after client requests or will it happen automatically?

H

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

With BetterKV, or without?

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

cache.delete

cache.delete or maybe even

cache.put

cache.put

cache.put

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

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

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).

B

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

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

B

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

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

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.

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

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).

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?

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

H

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

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

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

H

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

Thus, it sets the KV

cacheTtl

cacheTtl

cacheTtl

cacheTtl to a year.

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...

How do I disable CORS in CF workers ` has been blocked by CORS policy: No 'Access-Control-Allow-Orig

Similar Threads

Similar Threads

Similar Threads