How to use env variables in a pages function locally and live (updated title)

Hi I have a function in /functions/cf/check-password.js which contains basic

export function onRequest(context) {
  return new Response('Hello, world!')
}

export function onRequest(context) {
  return new Response('Hello, world!')
}

and I'm trying to call it with

        await this.$axios.post('http://localhost:3000/cf/check-password')

        await this.$axios.post('http://localhost:3000/cf/check-password')

and I'm getting 404. How do I call this function / file using "npx wrangler pages dev -- yarn dev" to run locally

18 Replies

Walshy•2y ago

It would be /check-password If you wanted /cf/check-password you’d have the path to the function be functions/cf/check-password.js

TincanOP•2y ago

I'm sorry, the path is functions/cf/check-password.js

Walshy•2y ago

Are you running wrangler in the same dir your functions are in?

TincanOP•2y ago

yep hm interesting, I can access the site at 8788, so I think you're probably right. It doesn't mention that in the terminal logs which is a little strange (in fact it says listening on 3000)

TincanOP•2y ago

TincanOP•2y ago

ahh right, ok, thanks! I'm now getting the following which is a step closer (I think)!`Cross-Origin Request Blocked: The Same Origin Policy disallow In a static site how can i add 'Access-Control-Allow-Origin': '*',

TincanOP•2y ago

just trying to do as above but was getting this, so I thought I had to add in cross origin

TincanOP•2y ago

when check-password just contains

export function onRequest() {
  console.log('HELLO WORLD!')
  return new Response('Hello, world!')
}

export function onRequest() {
  console.log('HELLO WORLD!')
  return new Response('Hello, world!')
}

i changed the call to await this.$axios.post('/cf/check-password') so it shouldnt really be calling 3000 anymore no? I'm using Nuxt, so its the Nuxt/axios module which I added In the end, I'll use env variables to define that anyway. For now have hardcoded the 8788 port no errors now, but also no "hello world" ah yes ok console.log doesn't work from inside the request (which does make sense as its "on the server" I think), the request does actually return a response containing hello world Great thanks for your help! I should be able to proceed from here yes there it is! thanks how can i pass parameters into this function?

Walshy•2y ago

parameters in what way? query params? like normal ?abc=def on your URL and fetch from the URL object

TincanOP•2y ago

Normal axios way would be something like this I think

await this.$axios.post(
          'http://localhost:8788/cf/check-password',
          {
            password: 'sometext',
          }

await this.$axios.post(
          'http://localhost:8788/cf/check-password',
          {
            password: 'sometext',
          }

I can try something like ?=... Could you expand on that? I'm getting request.json() is not a function. Also not clear why it would be await if im already inside the function, is request not already resolved at this point?

export function onRequest(request) {
  const body = request.json()
  console.log(body)

export function onRequest(request) {
  const body = request.json()
  console.log(body)

ahh ok, now where getting somewhere! So this gets at what I need

export async function onRequest(context) {
  const body = await context.request.json()
  const pw = body.password
  console.log(body)
  console.log(pw)

export async function onRequest(context) {
  const body = await context.request.json()
  const pw = body.password
  console.log(body)
  console.log(pw)

Thanks again for the help! Hi again, just to clarify one thing. If I have this in my wrangler.toml

cfp_password = "password"

cfp_password = "password"

, thats the equivalent local thing as adding a secret/encrypted env variable in Cloudflare Pages ?

TincanOP•2y ago

Ok, apparently I need an API key This link in the terminal is broken btw https://developers.cloudflare.com/api/tokens/create/

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

TincanOP•2y ago

unless its just supposed to redirect to https://developers.cloudflare.com/api/ ?

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

TincanOP•2y ago

in this

TincanOP•2y ago

possibly some complications because this isnt a project set up using wrangler init, rather an existing project that im trying to use cf functions on So really, I can just set the password in env locally and on CF dashboard and use them like I would any other env hopefully rather than using wrangler toml ok sweet Hang on, how do you access env variables then from within the function? this.$config. is not available

Walshy•2y ago

what uses this.$config never seen that before

TincanOP•2y ago

thats how its done normally in a nuxt project

Walshy•2y ago

god damn Vue

TincanOP•2y ago

haha Ok so I do need a wrangler.toml with the local env variable, then context.env will work on both local and live I think it does, if I have a wrangler toml with this in, I can see it as context.env

password = "password"

password = "password"

must be a bug then which is a shame because that would be a nice solution for me haha context.env contains whatever you put under [vars] in toml, accessible with .key { ASSETS: Fetcher {}, password: 'password', test: 'hisdh' } docs say a toml like above is the equivalent of this "This flag is an alternative to defining vars in your wrangler.toml. If defined in both places, this flag’s values will be used." ah right, yes I am ok so I do do, like you say, --binding foo=bar How do I access that then, now that its no longer under context.env? no i removed the wrangler.toml and I'm passing it in the command $ npx wrangler pages dev -- yarn dev --binding password=password ah right ok Great that seems to work now! Thanks again

Gaming

Programming

How to use env variables in a pages function locally and live (updated title)