使用 HTML 和 JS 通过 URL 访问 XML 文件

Posted 2023-02-16

【中文标题】使用 HTML 和 JS 通过 URL 访问 XML 文件

【英文标题】：Accessing an XML file via URL using HTML and JS

【发布时间】：2021-03-10 19:10:40

【问题描述】：

我正在创建一个依赖于托管在单独域中的 XML 文件数据的网站。简而言之，如果托管在 HTTP://example.com/test.XML 上的 XML 文件中的某个元素从 true 更改为 false，我希望我的域中的 html 文件的元素发生更改。如果 XML 与我的 HTML 文件位于同一目录中，我可以实现这一点，但我无法找到解决它位于不同域的问题的方法。

我曾尝试使用 jquery，但我不确定我做错了什么。我试过的代码如下：

$(document).ready(function()
  var myXML = ""
  var request = new XMLHttpRequest();
  request.open("GET", "http://example.com/test.XML", true);
  request.onreadystatechange = function()
      if (request.readyState == 4) 
          if (request.status == 200 || request.status == 0) 
              myXML = request.responseXML;
          
      
  
  request.send();
  document.getElementById("test").innerHTML = new XMLSerializer().serializeToString(myXML.documentElement);
);

请提供帮助，并提前感谢您的宝贵时间！

【问题讨论】：

您在尝试上述过程时遇到的错误是什么？

@HarshanaSerasinghe 我收到的错误如下：CORS 策略已阻止从原点 'null' 在 'example.com/test.xml' 处获取数据：否 'Access-Control-Allow-Origin'请求的资源上存在标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

@HarshanaSerasinghe 有没有办法解决这个问题？

【参考方案1】：

尝试使用不是最近的 fetch api。

$(document).ready(function()
  var myXML = ""
  fetch("http://example.com/test.XML")
  .then( response => response.text()  )
  .then( response => 
    //response is a string containing xml...
    document.getElementById("test").innerHTML = response
  )
  .catch( console.error )
  ;
);

我觉得你不需要序列化xml，你应该可以直接把它...但不确定

【讨论】：

您的代码似乎运行良好，谢谢。但是，我仍然收到错误消息，您能帮我找到解决方法吗？

我收到的错误如下：CORS 策略已阻止从源“null”获取“example.com/test.xml”的访问权限：没有“Access-Control-Allow-” Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

您为不同的域创建了一个 api（应用程序的那个，即使它只是端口不同），因此浏览器具有保护机制，以确保您的应用程序可以请求此 API。它被称为 Cors。稍微了解一下