title: How to make a request to Node.js server not fail when previewing Angular app on a different device on the same network?
body: <p>Angular front-end is hosted on port 4200. Express.js back-end is hosted on port 4000. Both are hosted on my desktop computer.</p>
  
  <p>Now I am on my mobile Android phone and navigate to 192.168.1.X:4200 to view the Angular app. The Angular app loads and works but with no data loaded from the Express.js server. From my desktop computer, the request to the Express.js server works fine and the Angular app in the browser displays proper data. Accessing 192.168.1.X:4000 (API for the data) on both devices' browser returns the expected JSON.</p>
  
  <p>I connected my phone to my desktop computer via USB to debug. Here is the error in Chrome DevTools Console:</p>
  
  <p><code>GET http://localhost:4000/ net::ERR_CONNECTION_REFUSED</code></p>
  
  <p>and</p>
  
  <pre><code>ERROR 
    HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:4000/", ok: false, …}
      error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
      headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
      message: "Http failure response for http://localhost:4000/: 0 Unknown Error"
      name: "HttpErrorResponse"
      ok: false
      status: 0
      statusText: "Unknown Error"
      url: "http://localhost:4000/"
      __proto__: HttpResponseBase
  </code></pre>
  
  <p>Network tab in Chrome DevTools...</p>
  
  <p>Network:</p>
  
  <pre><code>Name: localhost
  Status: (failed)
  Type: xhr
  Initiator: zone-evergreen.js:2952
  </code></pre>
  
  <p>Network Headers:</p>
  
  <pre><code>General
    Request URL: http://localhost:4000/
    Referrer Policy: no-referrer-when-downgrade
  Request Headers
    Provisional headers are shown
    Accept: application/json, text/plain, */*
    Origin: http://192.168.1.2:4200
    Referer: http://192.168.1.2:4200/
    Save-Data: on
    Sec-Fetch-Mode: cors
    User-Agent: Mozilla/5.0 (Linux; Android 9; SM-G965W) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.92 Mobile Safari/537.36
  </code></pre>
  
  <p>Express.js code:</p>
  
  <pre><code>const express = require('express'),
        cors = require('cors');
  
  const app = new express();
  
  app.use(cors());
  
  app.get('/', async (req, res) =&gt; {
    res.json({data: "a lot of data"});
  });
  
  
  app.listen(4000, () =&gt; {
    console.log('Back-end listening on port: 4000')
  });
  </code></pre>
  
  <p>So, the request to the Express.js server is failing when accessing the Angular app through my phone but not through my desktop computer.</p>