How to make a proxy function with Netlify Edge Function

Posted on November 6, 2022

Here a Netlify Edge Function that acts as a Proxy Function.

A proxy function can be used for a variety of reasons, usually to hide some operations or credentials from the frontend.

In my case, I wanted to fetch the Figma API in order to get a Figma Document.

Figma requires an Auth Token to fetch their API, thus, the necessity to hide them from the end-user.

Let's break the relevant parts:

The header configuration:

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers',
  'Access-Control-Allow-Methods': 'GET,OPTIONS',
  'Content-Type': 'application/json',

And the function itself:

export default async (request, context) => {

  const url = new URL(request.url)
  const path = url.pathname.replace('/figma/', '/')
  const search =
  let jsonData
    const figRes = await fetch('' + path + search, {
      headers: {
        'Accept': 'application/json',
        'X-Figma-Token': 'YOUR TOKEN'
    jsonData = await figRes.json()
    jsonData = e

  return new Response(JSON.stringify(jsonData), {headers})