Accessing XML file from localhost in javascript

Question

I am reading XML file using javascript then display it in my html page

it is working perfectly on FireFox.

I googled and found that it is because my file is local in my harddisk that is why Chrome and IE do not work, and Chrome gives this error

clocks.html:20 Failed to load file:///B:/Data/clocks.xml: 
Cross origin requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https.

so I created a local website and added the file there

http://localhost/clocks.xml

I can access the file through that link, but when I replace clocks.xml in my script with http://localhost/clocks.xml ended with page is not working not even in FireFox and getting this error from FireFox

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at http://localhost/clocks.xml. 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

how can I get this working in all browsers

my script here

        window.onload = function() {
            getClockInformation();
        }

        function getClockInformation() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    updateClocks(this);
                }
            };
            xhttp.open("GET", "http://localhost/clocks.xml", true);
            xhttp.send();
        }

How are you loading the html file, straight from disk? ie your browser ends up at file:///some/path/to/file.html? You would need to load the html file from the same domain, http://localhost in your case. Or setup your server to send out the appropriate cors headers for your xml file — Patrick Evans
– Patrick Evans, Commented Sep 17, 2018 at 0:05
Yes but are you loading the html page from the localhost url, ie http://localhost/file.html — Patrick Evans
– Patrick Evans, Commented Sep 17, 2018 at 0:07
no, i just double click on the html it opens like this B:\data\clocks.html — asmgx
– asmgx, Commented Sep 17, 2018 at 0:08
Yea that causes it to check for CORS since a file:/// url is considered a dfifferent domain than http://localhost. Load it from the localhost like you are the xml file, ie http://localhost/file.html and the request will work — Patrick Evans
– Patrick Evans, Commented Sep 17, 2018 at 0:09

Patrick Evans · Accepted Answer · 2018-09-17 00:18:36Z

1

If you want to just run it directly from disk you won't be able to use ajax as Chrome and probably other browsers just wont allow loading of file:/// urls.

You can get around this by using a file input or drag and drop operation to get the file

Html

Select the clocks.xml file
<input type="file" id="xmlfile">

Javascript

var fileInput = document.querySelector("#xmlfile");
fileInput.addEventListener("change",function(e){
  var file = fileInput.files[0];
  var reader = new FileReader();
  reader.onloadend = function(){
    var data = reader.result;
    //data will now contain the xml text
    //use DOMParser to parse it
    var xmlDocument = (new DOMParser()).parseFromString(data,"application/xml");
    //then use the various element methods to get the elements you need
    //for instance if you had a <clock> element
    var clockData = xmlDocument.querySelector("clock").textContent
  };
  reader.readAsText(file);
})

Otherwise you would need to setup cors or load both the html and xml from your server.

DOMParser api

FileReader api

answered Sep 17, 2018 at 0:18

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

asmgx Over a year ago

I added my html to the local domain, works in Chrome but not in IE.

Collectives™ on Stack Overflow

Accessing XML file from localhost in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related