XMLHttpRequest 不能直接读取本地 file:// 协议下的 XML 文件，因浏览器安全策略拦截；正确做法是通过本地 HTTP 服务同源加载，再用 fetch + DOMParser 解析，注意 MIME 类型为 "text/xml" 并处理编码与命名空间问题。
XMLHttpRequest 能否直接读取本地 file:// 协议下的 XML 文件
不能，现代浏览器会因安全策略拒绝 XMLHttpRequest 或 fetch 加载 file:// 路径的 XML（如 file:///path/to/data.xml），控制台报错类似：Access to XMLHttpRequest at 'file:///...' from origin 'null' has been blocked by CORS policy。这不是代码写错了，是浏览器主动拦截。
解决路径只有两个：启动一个本地 HTTP 服务，或改用浏览器支持的替代方案（如 XMLSerializer + Blob 手动构造，但不适用于“加载外部文件”场景）。
用 fetch + XMLDocument 解析同源 XML 文件（推荐做法）
确保 XML 文件与 HTML 页面同域（例如都通过 http://localhost:8080/ 访问），再用 fetch 获取并解析。注意：response.xml 在部分浏览器（如旧版 Safari）中不可靠，应统一用 response.text() + DOMParser。
-
fetch返回的是Response对象，不是直接的 XML 文档 -
DOMParser的parseFromString第二个参数必须是"text/xml"，写成"application/xml"或漏掉会导致解析失败、返回空文档 - XML 中若含 UTF-8 BOM 或编码声明不匹配（如声明
encoding="gb2312"但实际是 UTF-8），可能触发解析错误
fetch('data.xml')
.then(response => response.text())
.then(str => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(str, 'text/xml');
if (xmlDoc.querySelector('parsererror')) {
throw new Error('XML parse error: ' + str);
}
console.log(xmlDoc.querySelector('item').textContent);
})
.catch(err => console.error('Load failed:', err));
IE9–IE11 兼容：用 ActiveXObject 回退方案
如果仍需支持 IE9–11，XMLHttpRequest 对 XML 响应类型支持不稳定，得用 ActiveXObject("Microsoft.XMLDOM") 并手动设置 async = false（仅限旧 IE）。
立即学习“前端免费学习笔记（深入）”；
- 必须检查
xmlDoc.readyState === 4 && xmlDoc.parseError.errorCode === 0，不能只看readyState -
load方法返回布尔值，false表示加载失败（不是抛异常） - IE 下不支持
fetch，也无DOMParser，必须走此路径
function loadXMLIE(url) {
const xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
if (!xmlDoc.load(url)) {
throw new Error('XML load failed in IE: ' + xmlDoc.parseError.reason);
}
return xmlDoc;
}
常见错误：XML 命名空间导致 querySelector 失效
如果 XML 含命名空间（如 <rss xmlns="http://purl.org/rss/1.0/">），直接用 xmlDoc.querySelector('item') 会返回 null —— 浏览器把所有元素视为在该命名空间下，而 querySelector 默认不匹配命名空间。
- 解决方法一：用
getElementsByTagNameNS('*', 'item')（*表示任意命名空间） - 解决方法二：在解析前预处理 XML 字符串，移除
xmlns=属性（仅当业务允许且无歧义时） - 避免在原始 XML 中滥用默认命名空间；若必须用，建议统一用
getElementsByTagNameNS替代querySelector
命名空间问题最容易被忽略，调试时看到 xmlDoc.documentElement 存在但子节点查不到，八成是它。
