Vue.js需用DOMParser解析XML：先fetch/axios以text格式获取字符串，再parseFromString转为文档对象，检查parsererror；提取数据为JS对象赋值ref/reactive，注意CORS和MIME类型。
Vue.js 本身不内置 XML 解析能力，但可以通过原生 JavaScript 的 DOMParser 配合 HTTP 请求（如 fetch 或 axios）来请求并解析 XML 数据。关键在于：先获取 XML 字符串，再用浏览器 API 转成可遍历的 DOM 文档对象。
使用 fetch 请求 XML 并用 DOMParser 解析
这是最轻量、无需额外依赖的方式。注意设置 responseType 为 'text'（fetch 默认会尝试解析为 JSON，对 XML 会报错），再手动解析：
- 发送 GET 请求，确保后端返回的是标准 XML（Content-Type:
application/xml或text/xml） - 用
response.text()获取原始字符串，避免自动解析失败 - 用
new DOMParser().parseFromString(xmlString, 'application/xml')得到 XML 文档对象 - 检查
xmlDoc.querySelector('parsererror')判断是否解析出错（常见于格式错误或跨域未配 CORS）
在 Vue 组件中安全使用解析结果
XML 解析后得到的是只读的 DOM 结构，不能直接响应式更新。建议将关键数据提取为普通 JS 对象（如数组或对象），再赋值给 ref 或 reactive：
- 例如提取所有
Array.from(xmlDoc.querySelectorAll('item')).map(el => ({ title: el.querySelector('title')?.textContent || '', link: el.querySelector('link')?.textContent || '' })) - 避免在模板中直接调用
xmlDoc.getElementsByTagName—— 它返回的是实时集合，且非响应式 - 错误处理要前置：XML 格式非法、网络失败、CORS 拒绝都需单独捕获，不要依赖
catch吞掉所有异常
用 axios 请求时的注意事项
axios 默认会尝试解析响应体，对 XML 容易报错。必须显式配置：
立即学习“前端免费学习笔记（深入）”；
- 设置
responseType: 'text'（不是'xml'，axios 不支持该类型） - 禁用
transformResponse，防止它二次处理字符串 - 示例：
axios.get('/api/feed.xml', { responseType: 'text' }).then(res => { const xmlDoc = new DOMParser().parseFromString(res.data, 'application/xml'); })
服务端代理规避 CORS（开发阶段常用）
本地开发时，浏览器常因跨域拒绝 XML 请求。Vue CLI 和 Vite 都支持代理：
- Vue CLI：在
vue.config.js中配置devServer.proxy，把/api代理到真实 XML 接口域名 - Vite：在
vite.config.ts的server.proxy中添加对应规则 - 代理后，前端请求相对路径（如
/api/data.xml），实际由开发服务器转发，绕过浏览器同源限制
基本上就这些。XML 处理逻辑和 Vue 的响应式无关，重点是“请求 → 原始字符串 → DOMParser → 提取结构化数据 → 赋值响应式变量”。不复杂但容易忽略 MIME 类型和 CORS 问题。
