Framework and platform snippets

Last updated 2026-09-17

The same endpoint from the code you actually write: `fetch`, axios and ky, the browser-safe patterns (keyless grant, server route), and what to do on Cloudflare Pages, Vercel and Netlify. Every example runs against https://corx.envx.cn — point the base URL at your own deployment and the rest still holds.

Client libraries

The proxy is one URL prefix, so any HTTP client works; these are the three most people reach for. All three examples run server-side, where the key belongs — in a browser, use the keyless pattern below instead.

fetch (Node, Bun, Deno)

One request, one header. On the server the key is an environment variable, not a build-time constant.

const CORX = "https://corx.envx.cn";

const res = await fetch(`${CORX}/fetch?url=${encodeURIComponent(target)}`, {
  headers: { "X-Api-Key": process.env.CORX_KEY }, // server-side env var
});
if (!res.ok) throw new Error(`CORX ${res.status}: ${await res.text()}`);
const data = await res.json();

axios

The target goes in `params`, so axios URL-encodes it for you.

import axios from "axios";

const CORX = "https://corx.envx.cn";

const { data } = await axios.get(`${CORX}/fetch`, {
  params: { url: target },
  headers: { "X-Api-Key": process.env.CORX_KEY }, // server-side env var
});

ky

Small, fetch-based and promise-first; `.json()` parses the response.

import ky from "ky";

const CORX = "https://corx.envx.cn";

const data = await ky
  .get(`${CORX}/fetch`, {
    searchParams: { url: target },
    headers: { "X-Api-Key": process.env.CORX_KEY }, // server-side env var
  })
  .json();

Browser code — with no credential

A key in a browser bundle is a published key. These two patterns are the safe ones: an origin grant on the server's key, and the environment-variable rule that keeps the key out of the build.

Keyless origin grant

Grant the page's origin on a key in the console and the browser calls the proxy with no credential at all. Metering follows the visitor IP, so one embedded site cannot drain the key.

// The page's origin is granted on the key — nothing secret ships.
const CORX = "https://corx.envx.cn";

const res = await fetch(`${CORX}/fetch?url=${encodeURIComponent(target)}`);
const data = await res.json();

Vite / React environment variables

Only `VITE_*` values are public — which is exactly what decides what may live in one. Next.js's `NEXT_PUBLIC_*` and SvelteKit's `PUBLIC_*` are the same rule under different names.

// ✗ Vite inlines every VITE_* value into the browser bundle.
const key = import.meta.env.VITE_CORX_KEY;        // readable by every visitor

// ✓ The instance URL is public; the key belongs on the server.
const corx = import.meta.env.VITE_CORX_URL;       // https://corx.envx.cn
// The browser calls CORX through a keyless grant, or through your own route.

A server route that holds the key

When the browser needs private data it asks your own backend, and your backend asks CORX. This is the BFF pattern, and it is the same code on every platform below.

Next.js route handler (adapts to any server)

Put the key in `CORX_KEY` on the server only. The response streams through, so a large file is never buffered twice.

// app/api/corx/route.ts (Next.js App Router) — any serverless function works.
export async function GET(request: Request) {
  const target = new URL(request.url).searchParams.get("url") ?? "";
  const res = await fetch(
    `${process.env.CORX_URL}/fetch?url=${encodeURIComponent(target)}`,
    { headers: { "X-Api-Key": process.env.CORX_KEY! } }, // server-side env var
  );
  return new Response(res.body, {
    status: res.status,
    headers: { "content-type": res.headers.get("content-type") ?? "application/octet-stream" },
  });
}
// CORX_URL = "https://corx.envx.cn" (or the deployment you run yourself)

Where the key must not go

In a browser bundle, a `VITE_*` / `NEXT_PUBLIC_*` variable, a public repository, a page source, a mobile app binary — anywhere a visitor can read it. A leaked key spends your quota and reaches every host and origin it allows, under your identity. Browser code gets a keyless grant or talks to your own server; nothing else.

Authentication, in detail

Deploy platforms

CORX is a plain HTTPS endpoint, so every platform reaches it the same way. What differs is only where the secret lives.

Cloudflare Pages

Cloudflare Pages — a Pages Function (`functions/api/corx.ts`) reads the key from `context.env.CORX_KEY`; `npx wrangler pages secret put CORX_KEY` stores it. Pages and a self-hosted CORX are the same account, and the browser can call the Worker directly when a keyless grant covers the site.

Vercel

Vercel — a Serverless or Edge Function (or the Next.js route above) reads `process.env.CORX_KEY` from Project → Environment Variables. Never put it in `NEXT_PUBLIC_*`: those values are inlined into the browser bundle.

Netlify

Netlify — a Function reads the key from Site configuration → Environment variables. No adapter, no plugin: it is one `fetch` to a URL.

When the public tier is enough

The shared key a hosted instance publishes on its landing page is meant for this: public data, demos, prototypes. It is GET and HEAD only, with daily quotas, no TTL control, no injection and a shared cache — and because it is public by design, inlining it in a page is fine. Anything private, credentialed or quota-sensitive belongs on your own deployment with your own key.

Get the public key How to self-host