XML解析报错：Extra content at end of document 问题排查及修复咨询

你的问题核心出在**mode: 'no-cors'这个配置上**，结合跨域场景导致了XML解析失败，具体原因和解决办法如下：

为什么跨域请求会报错？ #

当你给跨域请求设置mode: 'no-cors'时，浏览器会出于安全限制，返回一个「不透明响应（opaque response）」——这意味着你完全无法读取响应的内容，调用resp.text()拿到的根本不是目标服务器返回的真实XML数据（可能是空字符串或无效内容）。DOMParser拿到这种无效内容后，自然会抛出「文档末尾有额外内容」的解析错误。

而本地文件请求能正常工作，是因为本地请求属于同源范畴，mode: 'no-cors'在这里不会触发跨域安全限制，你能完整获取到XML内容并解析。

怎么修复？ #

方案1：移除mode: 'no-cors'并确保服务器支持CORS #

这是最直接的解决方案：

1. 删除fetch配置里的mode: 'no-cors'；
2. 确认目标ATS服务器配置了CORS响应头（比如Access-Control-Allow-Origin，允许你的域名访问）。如果服务器是你自己维护的，直接添加对应的CORS配置即可；如果是第三方提供商，需要联系他们开启对你域名的跨域权限。

修改后的代码示例：

fetch("https://webservice.hrlink.pl/sync/api/prezentacja/export.php")
  .then(function (resp) {
    // 先校验响应状态，避免后续处理无效数据
    if (!resp.ok) {
      throw new Error(`请求失败，状态码: ${resp.status}`);
    }
    return resp.text();
  })
  .then(function (data) {
    let parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data, "text/xml");
    
    // 额外添加解析错误校验，方便排查问题
    const parseError = xmlDoc.querySelector("parsererror");
    if (parseError) {
      console.error("XML解析失败:", parseError.textContent);
    } else {
      console.log("解析成功的XML文档:", xmlDoc);
    }
  })
  .catch(function (err) {
    console.error("请求或解析过程出错:", err);
  });

方案2：使用后端代理（如果第三方服务器无法配置CORS） #

如果ATS提供商不愿意或无法配置CORS，你可以在自己的后端服务中搭建一个代理接口：

• 让前端请求你自己的后端接口；
• 由后端接口去请求第三方的XML接口；
• 后端拿到XML数据后，再返回给前端。

这种方式下，前端和后端是同源的，不会有跨域限制，也能正常获取并解析XML。

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