多租户系统中Fetch请求需动态注入租户标识，推荐三种方式：一、封装request函数显式传入tenantId；二、从认证token自动提取；三、从子域名或路径前缀解析。均需避免全局污染与硬编码。
在多租户系统中，Fetch 请求需为每个请求动态携带租户标识（如 X-Tenant-ID 或 Tenant），关键在于**不硬编码、不全局污染、且能按请求上下文精准注入**。核心思路是封装统一的请求函数，在调用时传入租户信息，或从当前运行时环境（如用户登录态、路由、Store）自动提取。
方式一：封装 fetch 函数，显式传入 tenantId
最清晰可控的方式——将租户 ID 作为参数传入，避免隐式依赖：
function request(url, options = {}, tenantId) {
const headers = new Headers(options.headers || {});
if (tenantId) {
headers.set('X-Tenant-ID', tenantId);
}
return fetch(url, {
...options,
headers
});
}
// 使用示例
request('/api/orders', { method: 'GET' }, 'acme-inc')
.then(res => res.json())
.then(data => console.log(data));
- 适合页面级或组件级已明确知道当前租户的场景（如进入某租户专属工作台）
- 可配合 React 的 context、Vue 的 provide/inject 或 Pinia store 提前获取 tenantId 后传入
- 避免在基础 fetch 上做全局拦截（如 monkey patch window.fetch），易引发不可控副作用
方式二：基于当前用户会话自动推导租户
当租户与用户登录态强绑定（如单用户只属于一个租户），可从认证凭证中提取：
function getTenantIdFromAuth() {
const token = localStorage.getItem('auth_token');
if (!token) return null;
try {
const payload = JSON.parse(atob(token.split('.')[1]));
return payload.tenant_id || payload.iss; // 根据 JWT 声明字段调整
} catch {
return null;
}
}
function tenantFetch(url, options = {}) {
const tenantId = getTenantIdFromAuth();
const headers = new Headers(options.headers || {});
if (tenantId) {
headers.set('X-Tenant-ID', tenantId);
}
return fetch(url, { ...options, headers });
}
- 减少调用方负担，适合租户粒度较粗（如整个 SPA 对应单一租户）的系统
- 注意 token 过期或切换租户时需同步更新本地状态，否则可能发错头
- 若支持“用户跨租户切换”，需额外维护当前活跃租户状态（如存于 Zustand/Pinia）
方式三：结合路由或 URL 路径识别租户（子域名或路径前缀）
对采用 https://acme.example.com 或 https://example.com/tenants/acme 架构的系统，可从 location 自动解析：
立即学习“Java免费学习笔记（深入）”；
// 子域名模式：acme.example.com → tenantId = 'acme'
function getTenantIdFromHostname() {
const parts = window.location.hostname.split('.');
return parts.length > 2 ? parts[0] : null;
}
// 路径前缀模式：/tenants/acme/api/... → tenantId = 'acme'
function getTenantIdFromPath() {
const match = window.location.pathname.match(/^\/tenants\/([^/]+)/);
return match?.[1] || null;
}
function autoTenantFetch(url, options = {}) {
const tenantId = getTenantIdFromHostname() || getTenantIdFromPath();
const headers = new Headers(options.headers || {});
if (tenantId) {
headers.set('X-Tenant-ID', tenantId);
}
return fetch(url, { ...options, headers });
}
- 零配置、对业务代码透明，适合租户隔离严格的 SaaS 架构
- 需确保前端路由和 API 路由策略一致（如子域名路由必须后端也按此分发）
- 开发环境（localhost）需模拟子域名或提供 fallback tenantId
补充：Axios 用户可参考的拦截器写法（非 Fetch，但常被对比）
虽然问题聚焦 Fetch，但很多团队用 Axios。其拦截器天然适合注入：
axios.interceptors.request.use(config => {
const tenantId = getCurrentTenantId(); // 你的获取逻辑
if (tenantId) {
config.headers['X-Tenant-ID'] = tenantId;
}
return config;
});
- Fetch 无原生拦截器，所以必须靠封装或代理函数实现类似能力
- 若项目已用 Axios，不建议为租户头单独切回 Fetch；若坚持用 Fetch，推荐方式一或二的封装
不复杂但容易忽略的是：租户头必须与后端约定一致（大小写、命名、是否必需），且在跨域请求时后端需在 Access-Control-Allow-Headers 中显式声明该头，否则浏览器会预检失败。
