I want to read a file on my server, in the same sub-domain and display its contents. I’ve seen similar issues here on XMLHttpRequest asynchronous not working, always returns status 0 except that in my case all files are on my server and within the same sub-domain (the same directory, even) and I didn’t want to hijack somebody else’s thread.
I have three files on my server:
counter.txt:
1234
loadfile.js:
function loadFile(filePath) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("output").innerHTML = this.responseText;
} else {
debug = 'readyState=' + this.readyState + '<br />status=' + this.status + '<br />responseText=' + this.responseText;
document.getElementById("output").innerHTML = debug;
}
};
xhttp.open("GET", filePath, true);
xhttp.send();
}
test.html (url):
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="loadfile.js"></script>
</head>
<body onload="loadFile('counter.txt')">
<h1>XMLHttpRequest Test</h1>
<div id='output'></div>
</body>
</html>
The output is always:
XMLHttpRequest Test
readyState=4
status=0
responseText=
Is there something that I missed?
[EDIT – 12 July 2018, 20:07]
curl -I https://downloads.solydxk.com/.counters/counter.txt
Returns this:
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 12 Jul 2018 18:04:06 GMT
Content-Type: text/plain
Content-Length: 5
Last-Modified: Thu, 12 Jul 2018 12:27:35 GMT
Connection: keep-alive
ETag: "5b474937-5"
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=31536000 ; always
x-xss-protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'none'; script-src 'self' 'unsafe-inline'; img-src 'self'; style-src 'none'; font-src 'none'; frame-src 'none'; frame-ancestors 'none'; connect-src 'none'; object-src 'none'; media-src 'none'; form-action 'none'; base-uri downloads.solydxk.com www.downloads.solydxk.com
X-Powered-By: PleskLin
Accept-Ranges: bytes
[SOLUTION]
In the Content-Security-Policy part you see that connect-src is set to ‘none’. When you’re able to change the Apache settings on your server, check that the headers of your domain are configured correctly.
In my case I had to set connect-src to ‘self’.
When you’re using Plesk to maintain your server:
Websites & Domains > your domain > Apache & nginx settings > Additional headers > Enter custom value:
Content-Security-Policy: default-src 'none'; script-src 'self' 'unsafe-inline'; img-src 'self'; style-src 'none'; font-src 'none'; frame-src 'none'; frame-ancestors 'none'; connect-src 'self'; object-src 'none'; media-src 'none'; form-action 'none'; base-uri $host www.$host
2
Answers
Have you tried registering the “load” handler instead of
xhttp.onreadystatechange = your function
xhttp.addEventListener(“load”, your function);
Check in dev tool :