框架与平台代码示例

最后更新 2026-09-17

把同一个端点写进你真正在写的代码：`fetch`、axios、ky，浏览器安全模式（免密钥授权、服务端路由），以及 Cloudflare Pages、Vercel、Netlify 各自怎么接。本页所有示例都以 https://corx.envx.cn 为基址——换成你自己的部署地址，规则不变。

客户端库

代理就是一个 URL 前缀，任何 HTTP 客户端都能用；下面是最常用的三个。三个示例都跑在服务端——那才是 key 该在的地方；浏览器里请改用下面的免密钥写法。

fetch（Node、Bun、Deno）

js

一次请求、一个请求头。在服务端，key 是环境变量，而不是构建期常量。

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

js

目标放进 `params`，axios 会替你完成 URL 编码。

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

js

基于 fetch 的轻量 Promise 客户端；`.json()` 直接解析响应。

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();

浏览器代码——不携带任何凭证

打进浏览器包的 key 等于已经公开。下面两种模式才是安全的：用服务端 key 做来源授权，以及把 key 挡在构建产物之外的环境变量规则。

免密钥来源授权

js

在控制台把页面的来源授权给某个 key，浏览器调用代理时完全不用携带凭证。计量按访客 IP 计，因此单个嵌入站点不会耗尽 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 环境变量

js

只有 `VITE_*` 是公开的——这恰好决定了什么能放进去。Next.js 的 `NEXT_PUBLIC_*`、SvelteKit 的 `PUBLIC_*` 只是换了名字的同一条规则。

// ✗ 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.

在服务端持有 key 的路由

浏览器需要私有数据时，先问自己的后端，后端再去问 CORX。这就是 BFF 模式，对下面所有平台都是同一段代码。

Next.js route handler（任何服务端都能改）

ts

把 key 只放进服务端的 `CORX_KEY`。响应是流式透传的，大文件不会被缓冲两次。

// 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)

key 绝不能放在哪

浏览器包、`VITE_*` / `NEXT_PUBLIC_*` 变量、公开仓库、页面源码、移动 App 二进制——任何访客能读到的地方。泄露的 key 会以你的身份消耗配额，并触达它允许的每一个主机和来源。浏览器代码只有两条路：免密钥授权，或走你自己的服务端。

鉴权细节

部署平台

CORX 只是一个普通 HTTPS 端点，所有平台的调用方式完全一样；区别只有密钥放在哪。

Cloudflare Pages

Cloudflare Pages——Pages Function（`functions/api/corx.ts`）从 `context.env.CORX_KEY` 读取 key，用 `npx wrangler pages secret put CORX_KEY` 写入。Pages 和自托管 CORX 在同一个账号里；如果 key 的来源授权覆盖了站点，浏览器也可以直接调用 Worker。

Vercel

Vercel——Serverless/Edge Function（或上面的 Next.js 路由）从 Project → Environment Variables 读取 `process.env.CORX_KEY`。绝不要放进 `NEXT_PUBLIC_*`：那些值会被内联进浏览器包。

Netlify

Netlify——Function 从 Site configuration → Environment variables 读取 key。不需要适配器或插件：就是对 URL 的一次 `fetch`。

什么时候公共档位就够了

托管实例在落地页公开的共享 key 就是为这类场景准备的：公开数据、演示、原型。它仅支持 GET/HEAD，有每日配额，不能控制 TTL、不能注入，且使用共享缓存——因为它在设计上就是公开的，内联到页面里没有问题。任何私有、带凭证或对配额敏感的需求，都请用自己的部署和自己的 key。

获取公共 key如何自托管