XMLHttpRequest response null

Question

Hi I'm new to web development. I have three files, index.html, myscript.js and server.js. A button on index.html calls the messageServer function in myscript.js which sends an XMLHttpRequest to server.js running Express on Node. The server receives the request but the response in myscript.js is always null. The readyState goes 1 and then 4. Why is it null? Thanks in advance
Edit: the response status code is 0
index.html:

<!DOCTYPE html>
<html>
    <head>
        <title id="title">Page Title</title>
        <script src="myscript.js"></script>
    </head>
    <body>
        <h1 id="header">Header</h1>
        <form>
            <input type="button" value="Message Server" onclick="messageServer();">
        </form>
    </body>
</html>

myscript.js

function messageServer() {
    const xhr = new XMLHttpRequest();
    const url = 'http://localhost:8888/';

    xhr.responseType = 'json';
    xhr.onreadystatechange = () => {

        log("Ready state: " + xhr.readyState + ", response: " + xhr.response);

        if(xhr.readyState === XMLHttpRequest.DONE) {
            return xhr.response;
        }
    };

    xhr.open('GET', url);
    xhr.send();
}

and server.js

const express = require('express');
const app = express();

const port = 8888;

let requestCount = 1;

app.get('/', (req, res, next) => {
    console.log('Received get request ' + requestCount);
    ++requestCount;
    res.send(JSON.stringify({myKey: 'myValue'}));
});

app.listen(port);

you set response type as json, why are you then sending it in stringified form? change it to `res.send({myKey: 'myValue'});` — kiddorails, Jun 09 '18 at 20:33
@kiddorails I got this error: "TypeError: First argument must be a string or Buffer" when I did that — Ben Lamb, Jun 09 '18 at 20:35
change it back to older version and add `res.setHeader('Content-Type', 'application/json');` before it. — kiddorails, Jun 09 '18 at 20:38
ok. instead of checking for xhr.response, try `xhr.responseText` — kiddorails, Jun 09 '18 at 20:43
and remove `xhr.responseType = 'json';` if it still doesn't work and give it a shot again — kiddorails, Jun 09 '18 at 20:44
and if still doesn't work, move `xhr.responseType = 'json';` after `xhr.open` and try again with both `xhr.response` and `xhr.responseText` — kiddorails, Jun 09 '18 at 20:45
Okay so moving the responseType to after open: with responseText both are empty strings and with response, when readyState is 1, it's an empty string and when readyState is 4, it's null. — Ben Lamb, Jun 09 '18 at 20:55
Are you even getting 200 response there? Can you just confirm it with `console.log(xhr.status)` ? — kiddorails, Jun 09 '18 at 20:57
https://gist.github.com/AnkurGel/9af39c377bf3ce1f167f9abf4ebb7568 This example works perfectly fine for me — kiddorails, Jun 09 '18 at 21:02
The status code was 0. Maybe it's because I'm running the server and the client-side script on the same computer? — Ben Lamb, Jun 09 '18 at 21:15
I tried that API endpoint in your example and it worked so. Wait it got a 400 so it didn't work but something different happened — Ben Lamb, Jun 09 '18 at 21:16
change log to console.log in myscript.js, also check any error message on console . — Rajnikant, Jun 09 '18 at 21:42
Bit of a stupid question, but how? When I press the button in the browser it's not linked to the console right so nothing shows up. Even if there's a way to execute it independently, the server is blocking the console from me running any commands — Ben Lamb, Jun 09 '18 at 21:59
Possible duplicate of [XMLHttpRequest status 0 (responseText is empty)](https://stackoverflow.com/questions/5005960/xmlhttprequest-status-0-responsetext-is-empty) — Heretic Monkey, Jun 09 '18 at 23:18
For other reasons see https://stackoverflow.com/questions/3825581/does-an-http-status-code-of-0-have-any-meaning/26451773#26451773 — Michael Freidgeim, Dec 24 '21 at 05:21

Rajnikant · Accepted Answer · 2018-06-09T23:09:31.977

main problem is CORS (cross origin resource sharing) is not enabled on express, chrome is bit strict about CORS.

put below code before app.get to enable cross-origin resource sharing

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

complete server.js should be as below

var express = require("express");
var app = express();

const port = 8888;
let requestCount = 1;

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

app.get('/', (req, res, next) => {
    console.log('Received get request ' + requestCount);
    ++requestCount;
    res.send(JSON.stringify({myKey: 'myValue'}));
});

app.listen(port);

Then check on network tab of developer tool, you should see {"myKey":"myValue"} in response.

Yes! That's it, thank you. Just a quick question: is this normal to have to add this to node apps? Is it because I'm running it locally or what — Ben Lamb, Jun 09 '18 at 22:15
it is not just applicable to node apps, in your example it is because of XmlHttpRequest, here is full link https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS , and What requests use CORS? section should explain it. even in my answer I put "*" it should be your domain/* so for your example http://localhost:8888/* . — Rajnikant, Jun 09 '18 at 23:15

XMLHttpRequest response null

1 Answers1