Is there something obviously wrong with this function that would cause a 503/1019 error? I have a st

Is there something obviously wrong with this function that would cause a 503/1019 error? I have a static nuxt 3 cf pages project that works until I deploy this code in a

/functions/[[catchall]].js

/functions/[[catchall]].js

. This code logic works when deployed separately as a cf worker but not when translated to a cf pages function.

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

SSpunkie Is there something obviously wrong with this function that would cause a 503/101...

Walshy•3/24/24, 1:38 PM

Well your fetch is gonna invoke the function again... which will do another fetch and invoke again... and repeat

Walshy•3/24/24, 1:39 PM

I think you want

env.ASSETS.fetch

env.ASSETS.fetch

there instead which will try to request the site content
https://developers.cloudflare.com/pages/functions/api-reference/#envassetsfetch

Cloudflare Docs

API reference · Cloudflare Pages docs

Learn about the APIs used within Pages Functions.

heftymouse•3/25/24, 7:37 AM

does middleware count towards your functions quota?

heftymouse•3/25/24, 4:39 PM

additionally, can i only run middleware on some static files? i'd like it to run before my actual pages get served but not static assets

heftymouse•3/25/24, 4:41 PM

the documentation just mentions

functions/_middleware.ts

functions/_middleware.ts

for 'all requests, including in front of static files', can't tell if there's any granularity for static files

Hheftymouse does middleware count towards your functions quota?

James•3/25/24, 8:20 PM

yes, if the function is invoked, it will count towards quota

Hheftymouse the documentation just mentions `functions/_middleware.ts` for 'all requests, in...

James•3/25/24, 8:20 PM

you could manually specify which routes it runs on with

_routes

_routes

if you wanted: https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file

JJames you could manually specify which routes it runs on with `_routes` if you wanted:...

heftymouse•3/26/24, 1:09 AM

excellent, thank you

heftymouse•3/26/24, 1:12 AM

in that case i won't have to worry about the quota

Me•3/27/24, 6:47 AM

I can't seem to figure out from the documentation, but is it possible to prevent a Pages Function from being called from anywhere other than the Page itself? I'm fairly new to web development so I'm not sure if this is a config thing outside of code or something I have to set up in the code of the Pages Function itself

MMe I can't seem to figure out from the documentation, but is it possible to prevent...

Hello, I’m Allie!•3/27/24, 9:05 AM

Not really. While you can use CORS to prevent other websites from calling your Functions, that only works in browsers that respect CORS. Not to mention tools like

curl

curl

, or anything that can make HTTP calls. They can be made to respect CORS, but by default do not

Hello, I’m Allie!•3/27/24, 9:05 AM

You could also block based on the origin header, but that doesn't preclude someone from setting that header too

HHello, I’m Allie!Not really. While you can use CORS to prevent other websites from calling your F...

Me•3/27/24, 12:58 PM

A visitor to the site would be able to see any requests the page makes to a function so I couldn’t use some sort of fixed authentication header right? Maybe a dynamically generated token based off a private key would work

MMe A visitor to the site would be able to see any requests the page makes to a func...

Hello, I’m Allie!•3/27/24, 1:29 PM

Your private key would still be present in the source though no? Or at least the token

HHello, I’m Allie!Your private key would still be present in the source though no? Or at least the...

Me•3/27/24, 1:42 PM

Oh right…

Cretezy•3/29/24, 6:17 PM

Hi! Is there a way to use cron with Pages+Functions?

James•3/29/24, 6:31 PM

There is not, sadly. You’ll have to use a normal Worker for that

GGLVXD•3/29/24, 8:07 PM

if i reach the requests limit will my functions just not work or my whole pages website will go down?

GGGLVXD if i reach the requests limit will my functions just not work or my whole pages ...

Chaika•3/31/24, 2:26 AM

Depends what your functions do (are they just middleware/stuff running in front of static assets)? and your Request Limit failure mode under Settings -> Functions

Dally•3/31/24, 3:05 PM

Hey guys, quick question. I'm using Pages to deploy my site in advanced mode, that is with _worker.js file. Currently my framework builds the site with _worker.js directory, meaning that it is not bundled. Does Pages deployment do any bundling before the worker is deployed, or do I have to bundle it myself? Thanks!

Dally•3/31/24, 3:05 PM

I googled and only found this: https://community.cloudflare.com/t/refactor-a-worker-to-a-pages-function-problem/536838 when one user mentions this, so I want to be just sure

When using advanced mode, you need to bundle the worker—Cloudflare Pages build system doesn’t handle the bundling (if I recall correctly.)

Dally•3/31/24, 3:22 PM

So I may have confirmed this myself, there is no bundling step done automatically. Please correct me if i'm wrong.

n0xQuZe•4/1/24, 6:08 PM

Hello everyone, just joined!
Trying to forward my pages app form submissions to an email, do need just a custom domain or do i need to buy some email hosting or something? Total noob when it comed to this stuff

Adam Wolf•4/1/24, 6:53 PM

can I use a function/middleware to capture the referer header for anything that 404s on a Cloudflare Pages site?

Nn0xQuZe Hello everyone, just joined! Trying to forward my pages app form submissions to...

schkovich•4/1/24, 10:01 PM

Perhaps MailChannels Pages Plugin might help https://developers.cloudflare.com/pages/functions/plugins/mailchannels/

Cloudflare Docs

MailChannels · Cloudflare Pages docs

The MailChannels Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. Then, it emails these form …

Tincan•4/2/24, 9:36 AM

I have a service worker and I'm getting in a bit of a muddle trying to pass it some data. Hopefully just being blind but can anyone just point out what I'm missing. Context (or request when destructured out) doesn't contain the data I'm trying to send

 //service worker
     const body = JSON.stringify({
        eventData: event.data,
        shown: true,
      })

      fetch(`http://127.0.0.1:8788/cf/log-notification`, {
        method: "POST",
        "Content-Type": "application/json",
        body: body,
      })

 //service worker
     const body = JSON.stringify({
        eventData: event.data,
        shown: true,
      })

      fetch(`http://127.0.0.1:8788/cf/log-notification`, {
        method: "POST",
        "Content-Type": "application/json",
        body: body,
      })

 // In CF function.
export async function onRequestPost(context) {
  console.log(context)

 // In CF function.
export async function onRequestPost(context) {
  console.log(context)

TTincan I have a service worker and I'm getting in a bit of a muddle trying to pass it s...

Hello, I’m Allie!•4/2/24, 9:39 AM

Try

// In Pages Function
export async function onRequestPost(context) {
  console.log(await context.request.json());
  // Do something else
}

// In Pages Function
export async function onRequestPost(context) {
  console.log(await context.request.json());
  // Do something else
}

HHello, I’m Allie!Try ```js // In Pages Function export async function onRequestPost(context) { ...

Tincan•4/2/24, 9:47 AM

ok thanks, looks like the body params are there, perhaps the original statement was only logging top level vars or something

TTincan ok thanks, looks like the body params are there, perhaps the original statement ...

Hello, I’m Allie!•4/2/24, 9:49 AM

By default, the

Request

Request

type doesn't have a parsed body. This allows you to skip reading it if you don't actually need to parse it yourself. The await request.json()await request.json() part tells it to begin pulling the body in, and parse it as JSON

HHello, I’m Allie!By default, the `Request` type doesn't have a parsed body. This allows you to sk...

Tincan•4/2/24, 9:57 AM

ah right cool, that makes sense

Tincan•4/2/24, 9:58 AM

thanks

vimo•4/2/24, 1:33 PM

I am a little confused about pages function, is it just like clouldflare workers and can be fetched?
so functions/hello.tsfunctions/hello.ts can be fetched like fetch('/hello')fetch('/hello') in my fullstack app?
Because when I do that in my remix app and try running it locally using wrangler, I can access directly viahttp://127.0.0.1:8787/hellohttp://127.0.0.1:8787/hello but fetching it gives an error Invalid URL string. checkURLInvalid URL string. checkURL

Vvimo I am a little confused about pages function, is it just like clouldflare workers...

Ruxorly•4/2/24, 2:12 PM

try to use the full path

Ruxorly•4/2/24, 2:12 PM

so in your fetch do “http://127.0.0.1:8787/hello” as the url

Ruxorly•4/2/24, 2:12 PM

obviously in a production app you’d change that tho

vimo•4/2/24, 2:13 PM

thanks. let me try that.

vimo•4/2/24, 2:14 PM

found an example https://developers.cloudflare.com/pages/tutorials/build-an-api-with-pages-functions/ they use relative url in it.

RRuxorly try to use the full path

vimo•4/2/24, 2:17 PM

thanks. absolute url works. makes me wonder is this just a wrangler local dev thing? and on deployment relative should work?

Vvimo thanks. absolute url works. makes me wonder is this just a wrangler local dev th...

Ruxorly•4/2/24, 2:23 PM

although i’m not well versed in remix, they could have a check to see if it’s a valid full url

Ruxorly•4/2/24, 2:24 PM

you might be able to use an environment variable to see if it’s running on prod and if it is, use that base url, otherwise use 127.0.0.1

vimo•4/2/24, 2:30 PM

You are not wrong to assume that but relative urls in Remix works.
Yes, I guess for now I will use a local env to concatenate it with the cf pages endpoint in my fetch calls. Will figure it out later when deploying if theres a better way or just if local concatenate else relative.
I hope relative url on deployment works.
Thanks for the help and env suggestion. Really appreciate it.

vimo•4/3/24, 9:27 AM

Are pages functions by default CORS protected? Since the function route works like an endpoint, do I have to worry about CORS protection?
Edit: Ah I see https://developers.cloudflare.com/pages/functions/examples/cors-headers/

Laurent Pellegrino•4/3/24, 9:51 AM

Hey there!

Using Cloudflare pages functions, local building works great.

Everything compile with wrangler pages dev dist/wrangler pages dev dist/. Same using wrangler pages functions buildwrangler pages functions build. This last says

Compiled Worker successfully.

If I compile locally and deploy with the next command, again the app is compiled and deployed with success : wrangler pages deploy dist/ --project-name my-projectwrangler pages deploy dist/ --project-name my-project.

However, if a page build is triggered on Cloudflare based on git push, then the build fails with errors like the following:

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

Here is the link to the build in question: https://dash.cloudflare.com/ffba33b855ee4ded76deff01907fee6a/pages/view/ipregistry-landing/009a6e06-f999-4277-8c76-f70b96e3a734

I have no idea about what's the issue is. Did you already experience something similar?

Laurent Pellegrino•4/3/24, 10:44 AM

I had to update my build command to run npm install in functions directory :X

zhen•4/4/24, 5:08 AM

Hello, workers now supports Python. Does anyone know if we can use Python in pages/functions yet?

Zzhen Hello, workers now supports Python. Does anyone know if we can use Python in pag...

Isaac McFadyen•4/4/24, 12:50 PM

I don't believe you can, and I don't think it will be coming. Pages relies on bundling your Functions into one big Worker at deploy time, which wouldn't really work with some being Python and some not - plus they inject custom code which is written in JS, which also wouldn't really work.

IEatBeans•4/8/24, 2:57 AM

I see that pages now supports a wrangler.toml. This is great, but what happens if you already have one for workers in the same project? I am using pages functions primarily, but workers for a few cron tasks. Do I need to move all the workers stuff into a subrepo, or can they both share a toml file?

i.wont.tell•4/8/24, 11:29 PM

guys I've added a turnstile widget to my site and depending if it's successful (both challengeand verification) an element is shown, the first time it worked well, then I reloaed the page and now I'm getting:

Request for the Private Access Token challenge.
The next request for the Private Access Token challenge may return a 401 and show a warning in console.

Request for the Private Access Token challenge.
The next request for the Private Access Token challenge may return a 401 and show a warning in console.

i.wont.tell•4/8/24, 11:29 PM

But the verification is passed

i.wont.tell•4/8/24, 11:29 PM

Why?

Is there something obviously wrong with this function that would cause a 503/1019 error? I have a st

Similar Threads

Similar Threads

Similar Threads