Skip to main content

How to Set Up a Reverse Proxy to PartnerPage on Netlify

Use Netlify’s rewrite capability to customize your directory URL to seem as if it's part of your site, such as yourdomain.com/experts

R
Written by Roberto Carozza
Updated this week

This guide shows how to forward requests to your PartnerPage directory while preserving the full path and including required headers.

✅ Requirements

  • Your site is hosted on Netlify

  • You are able to configure Netlify Edge Functions

  • You want to proxy a path like /partner-directory/... to your PartnerPage directory

  • You know your PartnerPage base URL (e.g. https://<your-id>.directory.sites.partnerpage.io or <yourcompany>.partnerpage.io)

1. Add a Netlify .toml File

The netlify.toml file is Netlify’s configuration file that tells Netlify how to build, route, and run features like redirects, headers, and Edge Functions for your site. It needs to include the two below configurations. Remember to change "find-a-partner" for whatever path your directory will be served from on your site.

netlify.toml

[[edge_functions]]
path = "/find-a-partner"
function = "partner-proxy"

[[edge_functions]]
path = "/find-a-partner/*"
function = "partner-proxy"

❗ Note that that Netlify does not automatically include the bare prefix when you use the /* wildcard for the toml file, so it is important to keep both configurations above.

2. Set up Your Netlify Edge Function

This Edge Function acts as a reverse proxy between your Netlify site and your PartnerPage directory. When a visitor loads a page on your site under the /find-a-partner route, the function:

  1. Builds the upstream URL

  2. Copies and updates headers, including required PartnerPage headers

  3. Proxies the request

  4. Returns the upstream response to the browser

netlify/edge-functions/partner-proxy.js

export default async (request, context) => {
  const upstreamBase = "https://<your-id>.directory.sites.partnerpage.io";

  const url = new URL(request.url); 
  const upstreamURL = new URL(upstreamBase + url.pathname + url.search);
  
  // Copy headers and add PartnerPage-required ones 
  const headers = new Headers(request.headers); 
  headers.set("PartnerPage-Reverse-Proxy", "true"); 

  const clientIP = context.ip || headers.get("x-forwarded-for") || ""; 
  headers.set("PartnerPage-Client-IP", clientIP); 

  headers.set("host", new URL(upstreamBase).host); 

  const init = { 
   method: request.method, 
   headers, 
   body: ["GET", "HEAD"].includes(request.method) ? undefined : request.body, 
   redirect: "manual", }; 

  const upstreamResp = await fetch(upstreamURL, init); 

  // Prevent stale caching 
  const respHeaders = new Headers(upstreamResp.headers); 
  respHeaders.set("cache-control", "no-store, no-cache, must-revalidate, max-age=0"); 
  respHeaders.set("pragma", "no-cache"); 

  return new Response(upstreamResp.body, { 
   status: upstreamResp.status, 
   statusText: upstreamResp.statusText, 
   headers: respHeaders, 
  });
};

Again, remember to replace const upstreamBase = "https://<your-id>.directory.sites.partnerpage.io"; with your actual PartnerPage base URL.

3. Review Your Configuration

To successfully set up a reverse proxy with Netlify, confirm:

  • You’ve defined your netlify.toml file and have it referencing your Edge Function

  • You've created your edge function using the template above

  • The following headers are included in proxied requests:

    • PartnerPage-Client-IP (visitor’s IP via :ip)

    • PartnerPage-Reverse-Proxy: true

Once everything is configured, visitors will access your PartnerPage content under your domain, with full path preservation and seamless integration.

Need help? Reach out to PartnerPage support anytime.

Resources:

Did this answer your question?