React Router / Remix

React Router 7 的 loader 和 action 在服务端运行，所以它们的 fetch 调用不带浏览器上下文就经过代理 —— 与 Next.js SSR 情况相同。代理需要这些服务端请求上的 x-test-rcrd-id header，才能把它们归属到正确的录制会话。

手动方式（当下可用）

每个 loader/action 都会收到入站的 request。从它上面读取录制 ID 的 header，并在任何服务端 fetch 上转发：

import { RECORDING_ID_HEADER } from 'test-proxy-recorder';
import type { LoaderFunctionArgs } from 'react-router';

export async function loader({ request }: LoaderFunctionArgs) {
  const headers: Record<string, string> = {};
  const id = request.headers.get(RECORDING_ID_HEADER); // 'x-test-rcrd-id'
  if (id) headers[RECORDING_ID_HEADER] = id;

  // Point the API base at the proxy in dev/test only.
  const res = await fetch('http://localhost:8100/api/data', { headers });
  return res.json();
}

与手动配置完全一样，仅在开发/测试中把后端基础 URL 指向代理（http://localhost:8100）。浏览器端请求仍由 playwrightProxy.before() 的 HAR 机制处理。

适配器发布后，这将简化为一个辅助函数的 import —— 在路线图上跟踪进展。