Edge functions failing with 502 error

Support
1

I have a trivial edge-function / serverless function example that works fine in dev but fails when deployed.

The repo is available at to try out

And it is deployed at if you want to look there?!
https://edge-bad-gateway-example.netlify.app

The scenario is as follows.

I have a netlify edge function ‘auth’ which basically runs to authenticate access to every serverless function on the /.netlify/* path.

I have a trivial ‘node-fetch’ serverless function ‘content’ that fetches some data from https://icanhazdadjoke.com.

I have another edge-function, fetch-content that runs on path /fetch-content.

Locally in dev… every thing works fine… but if you deploy it then the edge-function bails out

The edge function logs…
3:47:42 PM: [fetch-content] fetch-content error! [fetch failed 502]
3:48:41 PM: [fetch-content] fetch-content error! [fetch failed 502]

Not sure why this should be… some recursion going on with the edge-functions?

2

Hi @andystevenson

I set up a basic test and it works locally, and when deployed.

This is what I have:

Edge function

// netlify/edge-functions/main-edge.js
export default async({headers}) => {

  const auth = headers.get('authorization')

  if (auth !== "testing")
    return new Response("Unauthorized!", { status: 401 })
  
}

Functions

// netlify/functions/fetch-content.js
exports.handler = async() => {

  return {
    statusCode: 200,
    body: "Fetched!"
  }
}

// netlify/functions/main.js
exports.handler = async() => {

  return {
    statusCode: 200,
    body: "Main function"
  }
}

And the netlify.toml

[build]
  publish = "site" # Couple of basic files

[[edge_functions]]
  path = "/.netlify/*"
  function = "main-edge"

[[redirects]]
  from = "/fetch-content"
  to = "/.netlify/functions/fetch-content"
  status = 200

In the browser, accessing
https://hgjhi08oihlnk.netlify.app/fetch-content shows Fetched!

However accessing
https://hgjhi08oihlnk.netlify.app/.netlify/functions/fetch-content shows Unauthorized!

As does https://hgjhi08oihlnk.netlify.app/.netlify/functions/main and https://hgjhi08oihlnk.netlify.app/.netlify/functions/non-existent-function.

Using cURL

% curl -i https://hgjhi08oihlnk.netlify.app/fetch-content
HTTP/2 200
# other headers removed for brevity

Fetched!

% curl -i https://hgjhi08oihlnk.netlify.app/.netlify/functions/fetch-content
HTTP/2 401
# other headers removed for brevity

Unauthorized!

% curl -i https://hgjhi08oihlnk.netlify.app/.netlify/functions/fetch-content -H'Authorization: testing'
HTTP/2 200
# other headers removed for brevity

Fetched!

I don’t know that protecting the /.netlify/* path is necessarily the most appropriate thing as it may impact other things (I don’t know what else runs under that path.)

1 Like
3

Hi, Coel,

Many thanks for the feedback.
I appreciate the example and sure I can rejig my examples to get a workaround.

However my scenario is slightly different and I was curious why it worked locally and not remotely?

What differs is I am calling fetch() from within an edge function to a serverless function which has another edge function protecting it.

I will have a go at modifying your example to see if it also breaks!

Regards Andy

4

I added another edge function

// netlify/edge-functions/fetch.js
export default async({url, headers}) => {

  try {
    const res = await fetch(`${new URL(url).origin}/.netlify/functions/fetch-content`, {
      headers: {
        Authorization: 'testing'
      }
    })
    const msg = await res.text()

    if (!msg)
      throw new Error("No message received!")

    else 
      return new Response(msg)

  } catch(e) {
    return new Response(e.message || e.toString(), { status: 500 })
  }
  
}

With

# Addition to netlify.toml
[[edge_functions]]
  path = "/fetcher"
  function = "fetch"

Visiting https://hgjhi08oihlnk.netlify.app/fetcher in the browser results in the message

Recursive requests to the same deployment cannot be processed.