diff --git a/fake/xml.fake.ts b/fake/xml.fake.ts
new file mode 100644
index 0000000..75ef5e2
--- /dev/null
+++ b/fake/xml.fake.ts
@@ -0,0 +1,26 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+
+// 通过 rawResponse 返回 XML 文本，便于在浏览器端演示 XML 解析
+export default defineFakeRoute([
+  {
+    method: 'GET',
+    url: '/xml/sample',
+    rawResponse(_req, res) {
+      // 这里模拟一个简单的 XML 文档
+      const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<note>
+  <to>George</to>
+  <from>John</from>
+  <heading>Reminder</heading>
+  <body>Don't forget the meeting at 3 PM today.</body>
+  <meta>
+    <id>42</id>
+    <createdAt>2025-09-02T10:00:00Z</createdAt>
+  </meta>
+</note>`;
+
+      res.writeHead(200, { 'Content-Type': 'application/xml; charset=UTF-8' });
+      res.end(xml);
+    },
+  },
+]);
diff --git a/src/pages/Page/API.page.vue b/src/pages/Page/API.page.vue
index ef498b5..f0c7e15 100644
--- a/src/pages/Page/API.page.vue
+++ b/src/pages/Page/API.page.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import axios from 'axios';
+
 const baseURL = '/fake-api';
 
 let fakeApiResult = $ref<null | Record<string, unknown>>(null);
@@ -9,6 +11,40 @@ onMounted(() => {
     .then((json) => (fakeApiResult = json));
 });
 
+// 使用 axios 请求 XML，并演示以文本获取后用 DOMParser 解析
+// 选择此方式的原因：可控性更强，便于处理编码、容错与字段抽取策略
+let xmlText = $ref<string | null>(null);
+let xmlParsed = $ref<Record<string, string> | null>(null);
+
+onMounted(async () => {
+  try {
+    const res = await axios.get<string>(`${baseURL}/xml/sample`, {
+      responseType: 'text',
+      headers: { Accept: 'application/xml' },
+      transformResponse: [(data: string) => data],
+    });
+    xmlText = res.data;
+
+    // 将 XML 字符串解析为 Document，再选择性抽取业务所需字段
+    const doc = new DOMParser().parseFromString(res.data, 'application/xml');
+    const pick = (selector: string) => doc.querySelector(selector)?.textContent?.trim() ?? '';
+    xmlParsed = {
+      to: pick('to'),
+      from: pick('from'),
+      heading: pick('heading'),
+      body: pick('body'),
+      id: pick('meta > id'),
+      createdAt: pick('meta > createdAt'),
+    };
+
+    // 备用方案：直接请求为 Document（部分运行环境可能不支持）
+    // const docRes = await axios.get<Document>(`${baseURL}/xml/sample`, { responseType: 'document' });
+    // console.log('Document:', docRes.data);
+  } catch (error) {
+    console.error('XML 请求失败: ', error);
+  }
+});
+
 /* fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then((response) => response.json())
   .then((json) => console.log(json)); */
@@ -22,6 +58,11 @@ onMounted(() => {
 <template>
   <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
   <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
+  <h3>XML 字符串</h3>
+  <pre class="break-all whitespace-pre-wrap">{{ xmlText }}</pre>
+
+  <h3>解析后的结果</h3>
+  <pre>{{ xmlParsed }}</pre>
 </template>
 
 <style scoped></style>
