React-admin TypeScript下dataProvider无法携带Cookie凭证问题求解

问题根因 #

ra-data-json-server提供的simpleRestProvider在发起常规列表查询、单条详情查询这类没有额外特殊配置的请求时，调用自定义httpClient不会传入第二个options参数，因此原代码中判断options存在才注入credentials配置的逻辑永远不会触发，最终请求自然不会携带Cookie。

修复代码 #

核心修改点是给options参数设置默认空对象，不需要做额外空值判断，无论调用方是否传入配置，都能统一注入凭证配置：

import * as ra_core from "ra-core";
import { fetchUtils } from "react-admin";
import simpleRestProvider from "ra-data-json-server";

const httpClient = (url: string, options: ra_core.Options = {}) => {
  options.credentials = "include";
  // 如需统一注入CSRF头、自定义鉴权头也可以在此处添加
  return fetchUtils.fetchJson(url, options);
};

const dataProvider = simpleRestProvider("http://localhost:3000", httpClient);

return <Admin dataProvider={dataProvider}>...</Admin>

额外注意事项 #

• 这种写法不会覆盖调用方传入的已有请求配置（比如自定义请求方法、请求头、请求体等），兼容所有react-admin默认的请求场景
• 跨域场景下除了前端配置credentials: "include"，还需要服务端配合配置响应头：
  • Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Origin不能设置为通配符*，必须明确指定前端服务的源地址，否则Cookie依然无法正常跨域携带

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