我的 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:// 协议的 AJAX 请求。

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

Here are instructions 用于在每个操作系统上提供开关。

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

可能最简单的做法是设置本地 Web 服务器并运行您的应用程序以及其中的 xml 文件，然后您不必担心在任一浏览器中都会出现此问题。

编辑

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

当使用 jQuery 请求 xml 文档时，您应该始终在设置对象中提供一个 dataType。在内部，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'));
}

?>

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