Next.js 14中如何自动在每次请求发送客户端指纹visitorId？

1. 封装全局Fetch函数 #

这是最直接的方案，自己封装一个带自动附加逻辑的fetch函数，所有请求都用这个函数替代原生fetch即可：

// utils/fetch.js
import { VISITOR_ID } from '@/path/to/Fingerprint';

// 从cookie中获取visitorId的通用方法
function getVisitorId() {
  if (typeof window === 'undefined') return null;
  return document.cookie.split('; ').find(row => row.startsWith(`${VISITOR_ID}=`))?.split('=')[1];
}

export async function fetchWithVisitor(url, options = {}) {
  const visitorId = getVisitorId();
  const headers = new Headers(options.headers);

  // 将visitorId添加到请求头（也可以选择添加到URL参数）
  if (visitorId) {
    headers.set('X-Visitor-ID', visitorId);
    // 若要添加到URL参数：
    // const urlObj = new URL(url);
    // urlObj.searchParams.set(VISITOR_ID, visitorId);
    // url = urlObj.toString();
  }

  return fetch(url, {
    ...options,
    headers
  });
}

之后所有请求都用这个封装函数：

const res = await fetchWithVisitor('/api/user', { method: 'POST', body: JSON.stringify(data) });

2. 使用Axios全局拦截器（如果项目用Axios） #

如果项目依赖Axios，可以通过全局请求拦截器自动附加visitorId，无需修改每个请求：

// utils/api.js
import axios from 'axios';
import { VISITOR_ID } from '@/path/to/Fingerprint';

const api = axios.create({ baseURL: '/api' });

// 请求拦截器：发起请求前自动添加visitorId
api.interceptors.request.use(config => {
  const visitorId = document.cookie.split('; ').find(row => row.startsWith(`${VISITOR_ID}=`))?.split('=')[1];
  if (visitorId) {
    config.headers['X-Visitor-ID'] = visitorId;
    // 若要添加到URL参数：
    // config.params = { ...config.params, [VISITOR_ID]: visitorId };
  }
  return config;
});

export default api;

之后直接用这个api实例发起请求即可：

const { data } = await api.get('/user/list');

3. Next.js 中间件（Middleware） #

如果是Next.js项目，还可以用中间件在服务端层面统一处理，无需修改任何客户端请求代码：

// middleware.js
import { NextResponse } from 'next/server';
import { VISITOR_ID } from '@/path/to/Fingerprint';

export function middleware(request) {
  const visitorId = request.cookies.get(VISITOR_ID)?.value;
  const response = NextResponse.next();

  // 为所有API请求自动添加visitorId到请求头
  if (visitorId && request.nextUrl.pathname.startsWith('/api')) {
    response.headers.set('X-Visitor-ID', visitorId);
    // 若需要转发到外部API，可修改原请求：
    // const modifiedRequest = new Request(request.url, { ...request });
    // modifiedRequest.headers.set('X-Visitor-ID', visitorId);
    // return NextResponse.next({ request: modifiedRequest });
  }

  return response;
}

// 配置需要生效的路径
export const config = {
  matcher: ['/api/:path*']
};

这种方案的好处是全项目统一生效，客户端无需做任何改动。

内容的提问来源于stack exchange，提问作者deadcoder0904