how to fix cors issue when consuming the worker url? it works in a plain get, but if i include a hea

Bbanbanboi how to fix cors issue when consuming the worker url? it works in a plain get, bu...

H

Do you also return CORS headers on

OPTIONS

OPTIONS

requests?

HHello, I’m Allie!Do you also return CORS headers on `OPTIONS` requests?

B

banbanboiOP•5/24/23, 12:35 PM

no, for now I only use Get, post

Bbanbanboi no, for now I only use Get, post

H

Hello, I’m Allie!•5/24/23, 12:35 PM

That might be why. Your browser may be sending a preflight

OPTIONS

OPTIONS

request, which fails.

HHello, I’m Allie!That might be why. Your browser may be sending a preflight `OPTIONS` request, wh...

B

banbanboiOP•5/24/23, 12:38 PM

i removed it including the Head, but still the same

Here's what my Web looks like when calling the worker url

Bbanbanboi i removed it including the Head, but still the same Here's what my Web looks l...

H

Hello, I’m Allie!•5/24/23, 12:39 PM

No, I mean that your browser itself is sending an

OPTIONS

OPTIONS

request, irrespective of your

Access-Control-Allow-Methods

Access-Control-Allow-Methods

Access-Control-Allow-Methods

Access-Control-Allow-Methods. If you don't handle that in your Worker, then the entire thing fails

HHello, I’m Allie!No, I mean that your browser itself is sending an `OPTIONS` request, irrespectiv...

B

banbanboiOP•5/24/23, 12:41 PM

no options sent by the browser

B

banbanboiOP•5/24/23, 12:41 PM

during request

NNeo I was thinking about using Workers to build an API for a timetabling app that wi...

C

Cyb3r-Jak3•5/24/23, 1:35 PM

Workers scale very easily not sure about Fauna DB but if it does then it should be good

NNeo What about GraphQL, does that work with Workers?

C

Cyb3r-Jak3•5/24/23, 2:06 PM

https://github.com/cloudflare/workers-graphql-server

GitHub

GitHub - cloudflare/workers-graphql-server: 🔥Lightning-fast, global...

Lightning-fast, globally distributed Apollo GraphQL server, deployed at the edge using Cloudflare Workers - GitHub - cloudflare/workers-graphql-server:

Lightning-fast, globally distributed Apollo...

GitHub - cloudflare/workers-graphql-server: 🔥Lightning-fast, global...

I

IdkWhatever69•5/24/23, 2:50 PM

am i doing something wrong?

I

IdkWhatever69•5/24/23, 2:50 PM

cron triggers dont work

I

IdkWhatever69•5/24/23, 2:51 PM

Bbanbanboi no options sent by the browser

S

sathoro•5/24/23, 2:52 PM

if you are doing a CORS request, your browser is automatically sending an OPTIONS request

CCyb3r-Jak3 I mean depends on what your API server needs to do. If simple requests handling ...

S

sathoro•5/24/23, 2:53 PM

Workers is only for "simple requests"?

IIdkWhatever69 cron triggers dont work

I

IdkWhatever69•5/24/23, 3:08 PM

anyone? please help

Ssathoro Workers is only for "simple requests"? 🙂

B

banbanboiOP•5/24/23, 3:08 PM

so having a key value request header will not work?
i put the worker key value in querystring, does this workaround is the best practice ?
does jwt will also work or I will be having a CORS issue once I implement it?

Bbanbanboi so having a key value request header will not work? i put the worker key value ...

S

sathoro•5/24/23, 3:08 PM

you just need to implement CORS correctly. you aren't even handling the CORS preflight request so of course it won't work

S

sathoro•5/24/23, 3:11 PM

personally I call this function on all responses before returning them to the client:

const enableCORS = (request, response) => {
  const origin = request.headers.get("origin") || "";

  const isAllowedOrigin =
    origin === "http://localhost:3000" ||
    origin.endsWith(".example.com");

  if (isAllowedOrigin) {
    for (const [key, value] of Object.entries({
      "Access-Control-Allow-Origin": origin,
      "Access-Control-Allow-Methods": "POST, DELETE, GET, OPTIONS",
      "Access-Control-Allow-Headers": "*",
    })) {
      response.headers.append(key, value);
    }
  }

  return response;
};

const enableCORS = (request, response) => {
  const origin = request.headers.get("origin") || "";

  const isAllowedOrigin =
    origin === "http://localhost:3000" ||
    origin.endsWith(".example.com");

  if (isAllowedOrigin) {
    for (const [key, value] of Object.entries({
      "Access-Control-Allow-Origin": origin,
      "Access-Control-Allow-Methods": "POST, DELETE, GET, OPTIONS",
      "Access-Control-Allow-Headers": "*",
    })) {
      response.headers.append(key, value);
    }
  }

  return response;
};

const enableCORS = (request, response) => {
  const origin = request.headers.get("origin") || "";

  const isAllowedOrigin =
    origin === "http://localhost:3000" ||
    origin.endsWith(".example.com");

  if (isAllowedOrigin) {
    for (const [key, value] of Object.entries({
      "Access-Control-Allow-Origin": origin,
      "Access-Control-Allow-Methods": "POST, DELETE, GET, OPTIONS",
      "Access-Control-Allow-Headers": "*",
    })) {
      response.headers.append(key, value);
    }
  }

  return response;
};

const enableCORS = (request, response) => {
  const origin = request.headers.get("origin") || "";

  const isAllowedOrigin =
    origin === "http://localhost:3000" ||
    origin.endsWith(".example.com");

  if (isAllowedOrigin) {
    for (const [key, value] of Object.entries({
      "Access-Control-Allow-Origin": origin,
      "Access-Control-Allow-Methods": "POST, DELETE, GET, OPTIONS",
      "Access-Control-Allow-Headers": "*",
    })) {
      response.headers.append(key, value);
    }
  }

  return response;
};

and in my route handling I have a simple

if (request.method === "OPTIONS") {
  return new Response("ok");
}

if (request.method === "OPTIONS") {
  return new Response("ok");
}

if (request.method === "OPTIONS") {
  return new Response("ok");
}

if (request.method === "OPTIONS") {
  return new Response("ok");
}

and this is what ties it together...

const response = await handleRequest(request, env, context, sentry);

return enableCORS(request, response);

const response = await handleRequest(request, env, context, sentry);

return enableCORS(request, response);

const response = await handleRequest(request, env, context, sentry);

return enableCORS(request, response);

const response = await handleRequest(request, env, context, sentry);

return enableCORS(request, response);

Ssathoro you just need to implement CORS correctly. you aren't even handling the CORS pre...

B

banbanboiOP•5/24/23, 3:14 PM

thank you can I try this ?

Bbanbanboi thank you can I try this ?

S

sathoro•5/24/23, 3:15 PM

yeah go for it

Ssathoro Workers is only for "simple requests"? 🙂

C

Cyb3r-Jak3•5/24/23, 3:38 PM

I mean no heavy compute or long requests

CCyb3r-Jak3 I mean no heavy compute or long requests

S

sathoro•5/24/23, 3:39 PM

we do several minute long requests it works fine actually

S

sathoro•5/24/23, 3:39 PM

the client just needs to stay connected lol

S

sathoro•5/24/23, 3:40 PM

using SSE

K

kian•5/24/23, 3:42 PM

What's your Worker code?

NNeo Is Cloudflare Workers good for making an API server?

D

dave•5/24/23, 3:48 PM

all of our public facing API services are on Cloudflare Workers, and even most of the private APIs are also on Workers.

KKartik ```app.get("*", async (ctx) => { const cacheurl = new URL(ctx.req.url); // c...

K

kian•5/24/23, 3:49 PM

headers

headers

is always going to be blank other than

pix-api

pix-api

in that scenario.

K

kian•5/24/23, 3:50 PM

You're not using the request headers, you define

headers

headers

with

let headers = new Headers();

let headers = new Headers();

which is an empty object and then only contains the

pix-api

pix-api

header which you set.

K

kian•5/24/23, 3:50 PM

If you want to use the request headers, that'd be

ctx.req.headers

ctx.req.headers

T

tobi•5/24/23, 4:07 PM

hi

with the upcoming workers snippets, in theory i should be able to make a "free" load balancer for an api; and the only real limit should be the dns resolution fees, is that correct (which only start at 1m/month)?

K

kian•5/24/23, 4:11 PM

Snippets can only make 1 subrequest so you wouldn't be able to do that.

K

kian•5/24/23, 4:11 PM

Well, you can do Math.random and select a subdomain based on that

K

kian•5/24/23, 4:11 PM

but you wouldn't be able to hit one and then decide to fallback if it failed

N

Neiki•5/24/23, 4:44 PM

can i somehow send me an email or sending with an webhook if that happens again? like let me notify

how to fix cors issue when consuming the worker url? it works in a plain get, but if i include a hea

Similar Threads

Similar Threads

Similar Threads