title: XMLHTTPRequest not working on server on localhost
body: <p>I'm developing a <code>node.js</code> RESTful server for home use on a RPI with Raspbian, and for testing, I've created a <strong>test HTML page</strong> that makes various <code>XMLHttpRequest</code>s to it. </p>
  
  <p>When developing I'm using a test <code>nodemon</code> server on my dev machine (a desktop machine, not the RPI), running on <code>localhost:4000</code>, and the <strong>test HTML page</strong> points to it. 
  Whenever I'm ready to commit the changes, I push them to the server (the RPI), even the test page. It should connect to the server on localhost.</p>
  
  <p>Something bizzare happens whenever I'm <strong>testing the page on the server</strong>: <code>localhost</code> is not recognized in the <code>XMLHttpRequest.open</code> method, but if I put the <strong>address of the server machine in the network</strong> (not 127.0.0.1, but 192.168.1.X for example), it works.</p>
  
  <p>The Command <code>netstat -vltn</code> shows that the node server is listening on port <code>4000</code>, I've enabled CORS, I've already tried to write <code>127.0.0.1</code> instead of <code>localhost</code>, and I've even modified the app.listen function to listen to <code>0.0.0.0</code>, like this:</p>
  
  <pre><code>app.listen(port, '0.0.0.0', function () {
       console.log('RESTful API server started on: ' + port);
  });
  </code></pre>
  
  <p>but still, <strong>every request from the test page hosted on the server, to localhost:4000 doesn't work</strong>.</p>
  
  <p>My problem here is that, if I need to push the test page on the server, I need to manually change the IP address for the <code>XMLHttpRequest</code> each time, instead of just keeping localhost. Is there a way to enable the use of localhost?</p>
  
  <p><strong>EDIT</strong>: I'm adding some client code to flesh out the problem.</p>
  
  <p><strong>testpage.html</strong> (the one that should work both on the dev machine and the RPI)</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
          &lt;script type="text/javascript"&gt;
          function sendData() {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function () {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                  // Typical action to be performed when the document is ready:
                  document.getElementById("demo").innerHTML = xhttp.responseText;
              }
          };
  
          xhttp.onerror = function(e) {
              console.log('error', e);
          };
  
          xhttp.open("POST", "http://127.0.0.1:4000/auth/loginTest", true);
          xhttp.setRequestHeader("Content-Type", "application/json");
          //I've omitted the part where I'm prepping a json with username/password data
          xhttp.send(jsonString);
      }
   &lt;/script&gt;
  &lt;/head&gt;  &lt;!--I'm skipping the rest of the code as there's only a div that 
  catches the json info sent by the server --&gt;
  </code></pre>
  
  <p><strong>server.js</strong> (the one that gets started on the RPI with <code>node server.js</code>)</p>
  
  <pre><code>var express = require('express');
  var cors = require('cors');
  var bodyParser = require('body-parser');
  var port = process.env.PORT || 4000;
  var auth = require(/*path to Auth middleware*/);
  
  var app = express();
  app.use(bodyParser.json({ type: 'application/json' }));
  
  app.options('*', cors());
  app.use(cors());
  
  app.use('/auth', auth);
  
  process
    .on('unhandledRejection', (reason, p) =&gt; {
      console.error(reason, 'Unhandled Rejection at Promise', p);
    })
    .on('uncaughtException', err =&gt; {
      console.error(err, 'Uncaught Exception thrown');
      process.exit(1);
    });
  
  app.listen(port, function () {
    console.log('RESTful API server started on: ' + port);
  });
  </code></pre>