Hey all, I'm stuck on the following. I'm running a local API made accesible via CF tunnel, and linke

JJohan Hey all, I'm stuck on the following. I'm running a local API made accesible via ...

I

IEatBeans•4/24/24, 4:39 PM

It sounds like the api is hosted locally, and just tunneled through CF network. I don’t think service bindings are for that, I think that’s for directly calling functions in other workers

JJohan Hey all, I'm stuck on the following. I'm running a local API made accesible via ...

C

Chaika•4/24/24, 4:41 PM

From reading up I see that fetching other workers in the same domain can cause problems and that's why service bindings where introduced

A Tunnel isn't a worker though, unless you have another worker in front of it or anything?
You're fetching the subdomain right, and not the raw cfargotunnel hostname?

J

JohanOP•4/24/24, 4:44 PM

Agreed, been reading up in the meantime too. So my focus is not on that.
Here's to workflow I''m trying to achieve: (pseudo names)

User uploads a file with a client side POST request using XMLHttpRequest to -> example.com/api/files
example.com/api/files does in turn do POST request to tunnel.example.com/localapi/files

I call the tunneled api like so:

await fetch("http://tunnel.example.com/localapi/files", {
                method: "POST", etc

await fetch("http://tunnel.example.com/localapi/files", {
                method: "POST", etc

await fetch("http://tunnel.example.com/localapi/files", {
                method: "POST", etc

await fetch("http://tunnel.example.com/localapi/files", {
                method: "POST", etc

not using the cfargotunnel, I have dns cname in place.

C

Chaika•4/24/24, 4:45 PM

should be https (although I'm guessing that's not a straight copy from your code)

not using the cfargotunnel, I have dns cname in place.

cname is proxied right? Do you get the exact error code it returns (ex: 502, 520, etc)

J

JohanOP•4/24/24, 4:45 PM

So the weird thing that throws me off is this. If I use postman to call example.com/api/files it works fine files get uploaded to the tunneled API, but when I use XMLHttpRequest call it doesn't. And I don't understand why

C

Chaika•4/24/24, 4:46 PM

oh, that sounds more like a browser issue, cors or something

J

JohanOP•4/24/24, 4:48 PM

Could be, but what throws me off even more is that I also make calls to supabase for metadata storage in the page/api endpoint, and that works fine. It just refuses to call my tunneled API in the fetch action. Not even a 404 or whatever, just a timeout

C

Chaika•4/24/24, 4:48 PM

well what times out, exactly, with what error code?

C

Chaika•4/24/24, 4:48 PM

The browser calling your worker? Your worker calling the tunnel?

J

JohanOP•4/24/24, 4:50 PM

no error code nothing, I tried realtime logging and tail and whatever I could find. Whenever it fetches the whole try/catch block with fetch is ignored.

J

JohanOP•4/24/24, 4:50 PM

And, locally running my nextJS app everything works fine, whenever I build it on cf pages it stops working

JJohan no error code nothing, I tried realtime logging and tail and whatever I could fi...

C

Chaika•4/24/24, 4:53 PM

gotta be something somewhere lol

C

Chaika•4/24/24, 4:53 PM

what does cloudflare return in the response to the worker, when it fails?

J

JohanOP•4/24/24, 4:54 PM

all the log events come back until the fetch call, then it does nothing, no error code, just a 200 ok but with lot's of expected log events missing

C

Chaika•4/24/24, 4:55 PM

so you have a nextjs app running on Pages, and the client when it goes to upload a file, goes to a worker (not a function?) which sends it to a tunnel on a subdomain

J

JohanOP•4/24/24, 4:56 PM

it's an API route on Pages > nextJS\app\api\files\route.ts

C

Chaika•4/24/24, 4:57 PM

ok so that's a function

C

Chaika•4/24/24, 4:57 PM

are your inputs identical from what you test in postman as what your app sends to the function?

J

JohanOP•4/24/24, 4:57 PM

Yes, when I run the app locally it works, same env, keys everything matches (AFAIK)

J

JohanOP•4/24/24, 4:58 PM

And indeed when I call the api function url from postman it also works, but not from the page itself.

C

Chaika•4/24/24, 4:58 PM

when you say you test in postman, are you testing against the deployed endpoint or the local one?

J

JohanOP•4/24/24, 4:59 PM

Both and both work

J

JohanOP•4/24/24, 4:59 PM

But obviously the deployed endpoint is the importand one

C

Chaika•4/24/24, 4:59 PM

so
postman local -> works
postman deployed -> works
browser local -> works
browser deployed -> doesn't, no errors

J

JohanOP•4/24/24, 4:59 PM

exactly

C

Chaika•4/24/24, 4:59 PM

you've gotta wrangle an error out of it somehow lol

C

Chaika•4/24/24, 5:00 PM

why not have it upload directly to the tunnel subdomain rather then going through the function?

J

JohanOP•4/24/24, 5:01 PM

because I add an extra layer of security (by obscurity) to my local setup, and in the deployed api function I also do some supabase stuff

J

JohanOP•4/24/24, 5:02 PM

And all supabase stuff works fine btw, the file is also uploaded to the api function because I can read all file properties correctly.

J

JohanOP•4/24/24, 5:02 PM

I'll dive deeper even more, but maybe I should rethink the setup and not waste more time

J

JohanOP•4/24/24, 5:03 PM

Cheers for the feedback appreciated!

K

KTibow•4/24/24, 11:51 PM

this is probably user error but why doesnt this work

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: application/javascript" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "worker.js="
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught SyntaxError: Invalid left-hand side expression in prefix operation\n  at worker.js:1:24\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: application/javascript" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "worker.js="
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught SyntaxError: Invalid left-hand side expression in prefix operation\n  at worker.js:1:24\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: application/javascript" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "worker.js="
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught SyntaxError: Invalid left-hand side expression in prefix operation\n  at worker.js:1:24\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: application/javascript" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "worker.js="
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught SyntaxError: Invalid left-hand side expression in prefix operation\n  at worker.js:1:24\n"
    }
  ],
  "messages": []
}

K

KTibow•4/24/24, 11:53 PM

yes it also fails with /content

K

KTibow•4/24/24, 11:58 PM

okay i messed up the content type, new error

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "@worker.js="";type=application/javascript+module"
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "could not read content for part metadata"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "@worker.js="";type=application/javascript+module"
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "could not read content for part metadata"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "@worker.js="";type=application/javascript+module"
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "could not read content for part metadata"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/[censored]/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          -H "CF-WORKER-MAIN-MODULE-PART: worker.js" \
          --form "@worker.js="";type=application/javascript+module"
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "could not read content for part metadata"
    }
  ],
  "messages": []
}

B

Beny•4/24/24, 11:58 PM

Include the metadata now

K

KTibow•4/24/24, 11:59 PM

but the header should say which worker file to read

K

KTibow•4/24/24, 11:59 PM

Alternative to including in a metadata part.

K

KTibow•4/25/24, 12:03 AM

even if i use metadata, it doesn't work

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/dbeb50c60a3a8939ca01c69a271f6159/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          --form "worker.js="";type=application/javascript+module" \
          --form metadata='{"main_module": "worker.js"}'
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught TypeError: Main module name is not present in bundle.\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/dbeb50c60a3a8939ca01c69a271f6159/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          --form "worker.js="";type=application/javascript+module" \
          --form metadata='{"main_module": "worker.js"}'
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught TypeError: Main module name is not present in bundle.\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/dbeb50c60a3a8939ca01c69a271f6159/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          --form "worker.js="";type=application/javascript+module" \
          --form metadata='{"main_module": "worker.js"}'
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught TypeError: Main module name is not present in bundle.\n"
    }
  ],
  "messages": []
}

➜  ~ curl -X PUT "https://api.cloudflare.com/client/v4/accounts/dbeb50c60a3a8939ca01c69a271f6159/workers/scripts/test/content" \
          -H "Authorization: Bearer [censored]" \
          -H "Content-Type: multipart/form-data" \
          --form "worker.js="";type=application/javascript+module" \
          --form metadata='{"main_module": "worker.js"}'
{
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught TypeError: Main module name is not present in bundle.\n"
    }
  ],
  "messages": []
}

B

Beny•4/25/24, 12:04 AM

Doesn't look like you put any file in as worker.js?

--form 'worker.js=@worker.js;type=application/javascript+module;filename=worker.js'

--form 'metadata=@metadata.json;type=application/json'

--form 'worker.js=@worker.js;type=application/javascript+module;filename=worker.js'

--form 'metadata=@metadata.json;type=application/json'

--form 'worker.js=@worker.js;type=application/javascript+module;filename=worker.js'

--form 'metadata=@metadata.json;type=application/json'

--form 'worker.js=@worker.js;type=application/javascript+module;filename=worker.js'

--form 'metadata=@metadata.json;type=application/json'

K

KTibow•4/25/24, 12:05 AM

the worker is empty. that shouldn't matter.

K

KTibow•4/25/24, 12:05 AM

i should at least get an error about it being empty.

K

KTibow•4/25/24, 12:06 AM

anyway after an excessive amount of searches i found https://community.cloudflare.com/t/how-to-update-worker-js-via-api/556768/6, which i'll try

K

KTibow•4/25/24, 12:09 AM

okay that worked

K

KTibow•4/25/24, 12:11 AM

but i do not like how confusing this is

KKTibow but i do not like how confusing this is

C

Chaika•4/25/24, 12:17 AM

yea some of those docs could get an upgrade/more examples.

Environments are from years ago but got abandoned due to issues

C

Chaika•4/25/24, 12:17 AM

(different from wrangler environments)

K

KTibow•4/25/24, 12:17 AM

wait the environments api is deprecated?

K

KTibow•4/25/24, 12:17 AM

what should i use instead?

KKTibow wait the environments api is deprecated?

C

Chaika•4/25/24, 12:18 AM

wydm?

K

KTibow•4/25/24, 12:18 AM

if environments are abandoned, that means i shouldn't use them, right?

Hey all, I'm stuck on the following. I'm running a local API made accesible via CF tunnel, and linke

Similar Threads