如何在Ant Design Pro的异步函数中发送自定义请求头？

看起来你已经找对路子啦！在 Ant Design Pro 里，我们可以直接通过 request 方法的配置参数，用 headers 字段来设置自定义请求头，你的代码其实已经实现了需求，我再补充一些细节和优化建议，让它更健壮：

1. 单请求自定义头（你的当前写法） #

你的代码本身是完全有效的，这里整理后结构更清晰：

export async function AccountLogin(params) {
  console.log('params', params);
  return request('http://dreamfactory.com/api/v2/user/session', {
    method: 'POST',
    // 在这里配置自定义请求头
    headers: {
      // 请求头键名遵循 HTTP 规范，通常用连字符分隔
      'X-DreamFactory-Api-Key': '36fda24fe5588fa4285ac6c6c2fdfbdb6b6bc9834699774c9bf777f706d05a88',
      // 若需要指定内容类型，可在此追加（Ant Design Pro 默认 request 可能自动处理，但显式声明更稳妥）
      'Content-Type': 'application/json'
    },
    body: params,
  });
}

注意事项： #

• 如果 params 是对象类型，确认下是否需要手动序列化为 JSON 字符串（Ant Design Pro 默认的 request 通常会自动处理，但特殊场景下可以用 JSON.stringify(params)）。
• 敏感信息比如 API Key 别硬编码在代码里！建议放在环境变量中，比如通过 process.env.REACT_APP_DREAMFACTORY_API_KEY 读取，避免泄露风险。

2. 全局统一添加请求头（更高效的方案） #

如果项目里多个请求都需要携带相同的自定义头（比如认证 Token、固定 API Key），可以在 src/utils/request.ts（Ant Design Pro 默认的请求封装文件）里做全局配置，不用每个请求重复写：

import { request } from 'umi';

// 全局拦截请求，自动添加通用请求头
request.interceptors.request.use((url, options) => {
  return {
    url,
    options: {
      ...options,
      headers: {
        'X-DreamFactory-Api-Key': process.env.REACT_APP_DREAMFACTORY_API_KEY,
        ...options.headers, // 保留单个请求自定义的头，优先级高于全局配置
      },
    },
  };
});

export default request;

配置后，所有通过这个 request 发起的请求都会自动带上通用头，单个请求如果有额外的头设置，还能覆盖全局配置，非常灵活。

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