Do you also return CORS headers on `OPTIONS` requests?

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

B

banbanboi•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!OP•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

banbanboi•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!OP•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

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

no options sent by the browser

B

banbanboi•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

banbanboi•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

banbanboi•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

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

let headers = new Headers();

let headers = new Headers(); which is an empty object and then only contains the

pix-api

pix-api

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

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

Do you also return CORS headers on `OPTIONS` requests?

Similar Threads

Similar Threads

Similar Threads