参考官网代码，无法在headers里面加自定义请求头参数

[lijun-wu]

重现步骤

在线示例链接：（必填）

步骤：
import { CopyOutlined, ReloadOutlined } from "@ant-design/icons";
import {
Attachments,
Bubble,
Sender,
Welcome,
useXAgent,
useXChat,
XRequest,
} from "@ant-design/x";
import { Button, Flex, type GetProp, Select, Space, Spin, message } from "antd";
import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.less";
import MarkdownEditor from "@/components/MarkdownEditor";

type BubbleDataType = {
role: string;
content: string;
};

export default () => {
const abortController = useRef(null);
const [inputValue, setInputValue] = useState("生成一篇文章");

// ==================== Runtime ====================
const [agent] = useXAgent({
baseURL:
"https://api.x.ant.design/api/llm_siliconflow_deepSeek-r1-distill-1wen-7b",
model: "DeepSeek-R1-Distill-Qwen-7B",
});
const loading = agent.isRequesting();

const { onRequest, messages, setMessages } = useXChat({
agent,
requestFallback: (_, { error }) => {
if (error?.name === "AbortError") {
return {
content: "请求已中止",
role: "assistant",
};
}
return {
content: "请求失败，请重试！",
role: "assistant",
};
},
transformMessage: (info) => {
const { originMessage, chunk } = info || {};

  let currentContent = "";
  let currentThink = "";
  try {
    if (chunk?.data && !chunk?.data.includes("DONE")) {
      const message = JSON.parse(chunk?.data);
      currentThink = message?.choices?.[0]?.delta?.reasoning_content || "";
      currentContent = message?.choices?.[0]?.delta?.content || "";
    }
  } catch (error) {}

  let content = "";

  if (!originMessage?.content && currentThink) {
    content = `<think>${currentThink}`;
  } else if (
    originMessage?.content?.includes("<think>") &&
    !originMessage?.content.includes("</think>") &&
    currentContent
  ) {
    content = `${originMessage?.content}</think>${currentContent}`;
  } else {
    content = `${originMessage?.content || ""}${currentThink}${currentContent}`;
  }

  return {
    content: content,
    role: "assistant",
  };
},
resolveAbortController: (controller) => {
  abortController.current = controller;
},

});

// ==================== Event ====================
const onSubmit = (val: string) => {
if (!val) return;

if (loading) {
  message.error("请求正在进行中，请等待请求完成。");
  return;
}

onRequest({
  stream: true,
  message: { role: "user", content: val },
  params: {
    sessionId: "current-session-id", // 替换为实际值
    userId: "current-user-id", // 替换为实际值
  },
});

};

// ==================== Nodes ====================
const chatList = (

{messages?.length ? (
/* 🌟 消息列表 */
<Bubble.List
items={messages?.map((i) => {
return {
...i.message,
content: ,
classNames: {
content: i.status === "loading" ? styles.loadingMessage : "",
},
typing:
i.status === "loading"
? { step: 5, interval: 20, suffix: <>💗</> }
: false,
};
})}
style={{
height: "100%",
paddingInline: "calc(calc(100% - 700px) /2)",
}}
roles={{
assistant: {
placement: "start",
footer: (
<div style={{ display: "flex" }}>
<Button type="text" size="small" icon={} />
<Button type="text" size="small" icon={} />

),
loadingRender: () => ,
},
user: { placement: "end" },
}}
/>
) : (
<Space
direction="vertical"
size={16}
style={{ paddingInline: "calc(calc(100% - 700px) /2)" }}
className={styles.placeholder}
>


)}

);

const chatSender = (
<>
{/* 🌟 输入框 */}
<Sender
value={inputValue}
onSubmit={() => {
onSubmit();
setInputValue("");
}}
onChange={setInputValue}
onCancel={() => {
if (
abortController.current &&
!abortController.current.signal.aborted
) {
abortController.current.abort("用户取消");
}
}}
loading={loading}
className={styles.sender}
allowSpeech
footer={({ components }) => {
const { SendButton, LoadingButton, ClearButton } = components;
return (


{loading ? ( ) : ( )} ); }} actions={false} placeholder="请输入..." /> </> ); // ==================== Render ================= return ( {chatList} {chatSender} ); }; 当前行为 我看官网是说要用XRequest这个方法，但是这个方法怎么用啊？如何与我的数据连接起来 预期行为 No response 上下文 No response 版本 1.5.0 您在哪些浏览器上遇到了这个问题？ No response

[dosubot]

你可以通过自定义 XRequest 并将其作为 request 传递给 useXAgent，从而在请求中添加自定义 headers。useXAgent 默认内部会用 XRequest 创建请求方法，但你可以覆盖它。这样，useXChat 也会自动用到你自定义的请求。

示例代码如下：

import { useXAgent, useXChat, XRequest } from "@ant-design/x";

// 1. 创建带自定义 headers 的 XRequest
const customRequest = XRequest({
  baseURL: "https://api.x.ant.design/api/llm_siliconflow_deepSeek-r1-distill-1wen-7b",
  model: "DeepSeek-R1-Distill-Qwen-7B",
  // 这里添加自定义 headers
  headers: {
    "X-Custom-Header": "your-value",
    // 其他自定义 header
  },
}).create;

// 2. 传递给 useXAgent
const [agent] = useXAgent({
  request: customRequest,
  // 其他配置项
});

// 3. 其余代码保持不变，useXChat 依然用 agent
const { onRequest, messages, setMessages } = useXChat({ agent, ... });

这样所有请求都会带上你自定义的 headers。如果你需要动态 header，可以把 XRequest 封装成一个函数，每次调用时传入不同的 headers。

相关文档和源码可以参考 XRequest 组件文档 和 useXAgent 源码实现。

如果你需要更高级的控制（比如每次请求动态 header），可以直接用 agent.request 方法发起请求，或在 XRequest 的实现里做更灵活的处理。相关社区讨论见 issue #759。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[hylin]

@lijun-wu 你参考 https://x.ant.design/components/use-x-agent-cn#components-use-x-agent-demo-custom 这个示例，给useXAgent传入一个自定义的request函数，内部你实现自定义headers请求，实现3个回调函数调用就行。