I am making a simple javascript application where I need to load an xml files and show them in front of the user. but my code only works in Mozilla Firefox but when it es to chrome and Internet Explorer they are not working. I am loading my XML document in a local machine.

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

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

And Here's my 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>

I found the error, here it is

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

I am making a simple javascript application where I need to load an xml files and show them in front of the user. but my code only works in Mozilla Firefox but when it es to chrome and Internet Explorer they are not working. I am loading my XML document in a local machine.

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

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

And Here's my 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>

I found the error, here it is

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

• javascript
• xml
• ajax
• google-chrome
• local

• Can you check for an error or something in the Chrome developer console? [Ctrl+Shift+J] – Rohan Prabhu Commented Apr 6, 2012 at 2:01
• I think the error here is that google chrome doesn't allow access to local files? but I found this error XMLHttpRequest cannot load file:///C:/Users/John/Desktop/JsTwist/dictionary.xml. Origin null is not allowed by Access-Control-Allow-Origin. – user962206 Commented Apr 6, 2012 at 2:04
• but it is working in Mozilla Firefox. – user962206 Commented Apr 6, 2012 at 2:11
• Your XML is valid, it was just improperly formatted and it looked like you were missing the first two lines. If you highlight your code in the text box and press CTRL+K, it will format it as code. – Jim Schubert Commented Apr 6, 2012 at 3:19

1 Answer 1

Google Chrome doesn't allow AJAX requests over the file:// protocol by default.

You'll need to start Chrome with the --allow-file-access switch.

Here are instructions for supplying switches on each OS.

I'm not sure how to enable the file protocol for IE.

Possibly the easiest thing to do is to setup a local web server and run your app along with the xml files in it, then you don't have to worry about this issue in either browser.

edit

Late edit, I know. I wanted to throw this out there in case others have an issue.

When requesting an xml document with jQuery, you should always supply a dataType in the settings object. Internally, jQuery does it's best to guess at what is returned and I've had it consider a perfectly good xml document to be HTML/XHTML.

To do this, add dataType: "xml". For example:

$(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"
    });
}

Supported data types are available on the documentation page for jQuery.ajax().

In addition, I've encountered the Access-Control-Allow-Origin error above when trying to fetch an RSS feed from a remote server. The only way I've determined to get around this is to proxy request the RSS feed from the server-side code and deliver it via some proxy script. Here's a simple example in 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 I highly remend modifying the above script to allow only those locations you plan to serve to your client code by validating q or by further restricting the isAjax function. I'm not a PHP developer and I don't pretend to know best practices for PHP security. If anyone has suggestions to improve the PHP snippet, I'd happily apply them.