如何使用ServiceStack获取Response Headers？React+Redux Toolkit场景下

解决方案 #

首先你当前拿不到响应头的核心原因是你用的请求client默认只返回了响应体数据，没有把完整响应对象暴露给回调，分两种常用场景处理：

场景1：请求client是Axios #

• 你的Axios大概率配置了全局响应拦截器，直接返回了response.data，丢弃了包含headers的完整响应对象
• 调整拦截器逻辑保留完整响应，或者为当前请求添加单独配置跳过对应拦截逻辑后，即可按以下方式取头：

return await client
.get(new Users())
.then((response) => {
  // 获取全部响应头
  console.log("所有headers", response.headers);
  // 获取指定响应头，例如自定义token
  console.log("自定义头", response.headers['x-user-token']);
  // 原响应体存放在response.data中
  console.log("响应数据", response.data);
  return response.data;
})
.catch((error) => {
  // 异常场景也可获取响应头（如果请求实际到达了后端）
  if(error.response) {
    console.log("异常响应头", error.response.headers);
  }
});

场景2：使用RTK Query自带的fetchBaseQuery发起请求 #

• 你需要在接口定义时通过transformResponse钩子拿到完整响应元信息，把headers和响应体一同返回：

// 接口定义处修改
export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: (result, meta) => {
        return {
          data: result,
          headers: meta.response.headers
        }
      }
    })
  })
})

• 修改后调用接口拿到的返回值中就包含headers字段，直接读取即可

注意事项 #

• 如果你要获取的是自定义响应头，需要后端在响应配置中添加 Access-Control-Expose-Headers，把你需要前端读取的自定义头加入名单，否则浏览器出于CORS安全限制会隐藏自定义头，就算响应中存在前端也无法读取
• 响应头的key不区分大小写，X-Custom-Key和x-custom-key都可以读取到同一个值

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