SvelteKit中CSR模式下X-Total-Count头无法在load函数获取的问题

CSR模式下，浏览器直接向API发起请求时，受同源策略的CORS规则限制，自定义响应头默认不会允许前端JavaScript读取——即使浏览器开发者工具能看到这个头，前端代码也无法获取。只有当API服务器通过Access-Control-Expose-Headers头明确指定要暴露的自定义头时，浏览器才会放开读取权限。

方案1：控制API服务器时直接配置 #

如果API是你自己维护的，直接在API的响应中添加Access-Control-Expose-Headers头，指定允许暴露X-Total-Count：

以Express框架为例，代码示例如下：

// 在API的响应处理逻辑中添加
res.header('Access-Control-Expose-Headers', 'X-Total-Count');
res.header('X-Total-Count', 你的总数量值);

添加后，CSR模式下前端就能正常读取X-Total-Count头了。

方案2：无法控制API服务器时用SvelteKit代理 #

如果API不是你维护的，无法修改其响应头，可以通过SvelteKit创建一个代理端点，转发请求并手动处理头信息：

1. 创建代理端点 #

在项目中新建src/routes/api/proxy-users/+server.ts文件，写入以下代码：

import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ fetch }) => {
  // 转发请求到原API
  const originResponse = await fetch('<原API的Url>', { credentials: 'include' });
  const totalCount = originResponse.headers.get('X-Total-Count');
  const usersData = await originResponse.json();

  // 构造新的响应，添加需要暴露的头
  const proxyResponse = new Response(JSON.stringify(usersData), {
    status: originResponse.status,
    headers: {
      ...originResponse.headers,
      'X-Total-Count': totalCount || '0'
    }
  });
  // 明确允许前端读取X-Total-Count
  proxyResponse.headers.append('Access-Control-Expose-Headers', 'X-Total-Count');

  return proxyResponse;
};

2. 修改页面的请求目标 #

在+page.ts中，把请求地址改成代理端点：

import type { UserOverview } from '$lib/types/user';
import type { PageLoad } from './$types';

export const load = (async ({ fetch}) => {
    let entryCount: number;
    const users: UserOverview[] = await fetch("/api/proxy-users", {
        method: 'GET',
        credentials: 'include'
    })
        .then((r) => {
            entryCount = parseInt(r.headers.get('X-Total-Count') as string);
            return r.json();
        });
    return {
        users,
        entryCount
    };
}) satisfies PageLoad;

这样不管是SSR还是CSR模式，都能正常获取到X-Total-Count头的值。

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