javascript - 我的 XML 文件未通过 Google Chrome 和 Internet Explorer

Question

我正在制作一个简单的 javascript 应用程序，我需要加载一个 xml 文件并将它们显示在用户面前。但我的代码只适用于 Mozilla Firefox，但当涉及到 chrome 和 Internet Explorer 时，它们就不起作用了。我正在本地机器上加载我的 XML 文档。

$(document).ready(function() {
    $('.buttons').slideToggle('medium');

    $.ajax({ 
    url: "dictionary.xml", 
    success: function( xml ) { 
        $(xml).find("word").each(function(){ 
            $("ul").append("<li>" + $(this).text() + "</li>");
        }); 
   } 
    });
}

这是我的 XML

 <?xml version="1.0" encoding="UTF-8"?> 
  <xml> 

    <word> 
      <threeletter>RIP</threeletter> 
      <fourletter>PIER</fourletter>
      <fiveletter>SPIRE</fiveletter> 
      <sixletter>SPIDER</sixletter> 
     </word>

     <word> 
      <threeletter>SUE</threeletter> 
      <fourletter>EMUS</fourletter>
      <fiveletter>SERUM</fiveletter> 
      <sixletter>RESUME</sixletter> 
     </word>

     <word> 
      <threeletter>COO</threeletter> 
      <fourletter>CON</fourletter>
      <fiveletter>CONDO</fiveletter> 
      <sixletter>CONDOM</sixletter> 
     </word>

    </xml>

我发现了错误，在这里

XMLHttpRequest cannot load file:///C:/Users/John/Desktop/JsTwist/dictionary.xml. Origin null is not allowed by Access-Control-Allow-Origin.

Answer 1

Google Chrome 默认不允许通过 file:// 协议(protocol)的 AJAX 请求。

您需要使用 --allow-file-access 开关启动 Chrome。

Here are instructions为每个操作系统提供开关。

我不确定如何为 IE 启用文件协议(protocol)。

可能最简单的做法是设置一个本地网络服务器并运行您的应用程序及其中的 xml 文件，这样您就不必在任何浏览器中担心这个问题。

编辑

后期编辑，我知道。我想把它放在那里以防其他人有问题。

当使用 jQuery 请求 xml 文档时，您应该始终在设置对象中提供数据类型。在内部，jQuery 最好猜测返回的内容，我已经让它认为一个非常好的 xml 文档是 HTML/XHTML。

为此，添加dataType: "xml"。例如:

$(document).ready(function() {
    $('.buttons').slideToggle('medium');

    $.ajax({ 
        url: "dictionary.xml", 
        success: function( xml ) { 
            $(xml).find("word").each(function(){ 
                $("ul").append("<li>" + $(this).text() + "</li>");
            }); 
        },
        dataType: "xml"
    });
}

支持的数据类型可在 jQuery.ajax() 的文档页面上找到.

此外，我在尝试从远程服务器获取 RSS 提要时遇到了上述 Access-Control-Allow-Origin 错误。我决定解决这个问题的唯一方法是从服务器端代码代理请求 RSS 提要并通过一些代理脚本传递它。这是一个简单的 PHP 示例:

<?php

 if(isset($_GET['q']) && isAjax())
 {
    $q = strip_tags($_GET['q']);
    header("Status: 200");
    header("Content-type: text/xml");
    echo  file_get_contents('http://'.$q);   
    exit();
 }

function isAjax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}

?>

注意 我强烈建议修改上述脚本，通过验证 q 或进一步限制 isAjax，只允许您计划为客户端代码提供服务的位置 功能。我不是 PHP 开发人员，也不会假装知道 PHP 安全性的最佳实践。如果有人有改进 PHP 代码段的建议，我很乐意采纳。