The workaround stock price API returns 'Waking up' HTML

Tell us what’s happening:

I’m trying to call stock price API https://repeated-alpaca.glitch.me/ from my app, but the API returns HTML of Glitch’s ‘Waking up’ page. Even though I can get correct JSON response of stock price data if I opened the URL on Chrome or called it from Postman or curl.

How can I get the JSON response from my Node.js code?

I referred to this comment and tried setting ‘Content-Type’ header to ‘application/json’ but didn’t work.

Your code so far

api.js

'use strict';

var expect = require('chai').expect;
// var MongoClient = require('mongodb');
const https = require('https');

// const CONNECTION_STRING = process.env.DB; //MongoClient.connect(CONNECTION_STRING, function(err, db) {});

module.exports = function (app) {

  app.route('/api/stock-prices')
    .get(function (req, res){
      const options = {
        hostname: 'repeated-alpaca.glitch.me',
        path: '/v1/stock/GOOG/quote',
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      }

      const https_req = https.request(options, (res2) => {
        let data = '';
        // A chunk of data has been recieved.
        res2.on('data', (d) => {
          data += d;
        });
        // The whole response has been received. Print out the result.
        res2.on('end', () => {
          console.log(data);
          res.json(data);
        })
      }).on('error', (e) => {
        res.send('Error on accessing external API.');
      })
      https_req.end();

    });

};

Response from the API

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maintenance</title>
    <noscript>
      <meta http-equiv="refresh" content="1">
    </noscript>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: white;
        font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
      }
      main {
        padding: 1rem;
      }
      p {
        max-width: 500px
      }
      .note{
        font-size: small;
        color: #9B9B9B;
      }
      .content{
        margin: 50px;
        position: fixed;
      }
      #loader:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        animation: ellipsis steps(4,end) 1000ms infinite;
        content: "\2026";
        width: 0px;
      }
      @keyframes ellipsis {
        to {
          width: 1.25em
        }
      }
      canvas#background {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="content">
        <p class="status">
          <span id="message">Waking up</span>
          <span id="loader" ></span>
        </p>
        <p class="note">
          To keep Glitch fast for everyone, inactive projects go to sleep and wake up on request.
        </p>
      </div>
    </main>
    <canvas id="background"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.9.4/bowser.min.js"></script>
<script>
// drawing
var canvas, context, canvasImage;
var cursorPosition = {
  x: undefined,
  y: undefined,
};
var color = '#e5e5e5';
var size = 30;
function randomColor() {
  var colors = [
    '#fcd1c4',
    '#abfcec',
    '#a3d9e1',
    '#fbbfff',
    '#a9ef8f',
    '#fff0b2',
    '#fff0b2',
  ];
  color = colors[Math.floor(Math.random() * colors.length)];
}
function throttle(ms, fn) {
  var lastCallTime;
  return function () {
    var now = Date.now();
    if (!lastCallTime || now - lastCallTime > ms) {
      lastCallTime = now;
      fn.apply(this, arguments);
    }
  }
}
function drawCircle(event) {
  context.beginPath();
  context.arc(cursorPosition.x, cursorPosition.y, size, 0, 2 * Math.PI);
  context.closePath();
  context.fillStyle = color;
  context.fill();
  canvasImage = context.getImageData(0, 0, window.innerWidth, window.innerHeight);
}
window.onload = function () {
  randomColor();
  canvas = document.getElementById('background');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  context = canvas.getContext('2d');
  window.onresize = throttle(100, function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.clearRect(0,0, window.innerWidth, window.innerHeight);
    canvasImage && context.putImageData(canvasImage, 0, 0);
  });
  window.onmousemove = throttle(10, function (event) {
    cursorPosition = {
      x: event.clientX,
      y: event.clientY,
    };
    drawCircle(event);
  });
  window.ontouchmove = throttle(10, function (event) {
    cursorPosition = {
      x: event.touches[0].clientX,
      y: event.touches[0].clientY,
    };
    drawCircle(event);
  });
}
</script>
<script>
// container status updates
setTimeout(function () {
  function reloadAfterDelay(delay) {
    delay = delay || 1000;
    return setTimeout(function () {
      window.location.reload(true);
    }, delay);
  }
  try {
    var isValidBrowser = bowser.check({
      ios: "7",
      msie: "10",
      android: "4.4",
      chrome: "16",
      firefox: "11",
    });
    if (!isValidBrowser) {
      throw new Error("Jump to refresh");
    }
    var initialReloadHandler = reloadAfterDelay(5000);
    var ws = new WebSocket("wss://" + document.location.hostname + "/___glitch_loading_status___");
    ws.onmessage = updateContainerStatus;
    ws.onerror = reloadAfterDelay;
    ws.onopen = function () {
      clearTimeout(initialReloadHandler);
      setInterval(function () {
        ws.send("keepalive");
      }, 15000);
    };
    ws.onclose = function () {
      reloadAfterDelay(1000);
    };
    function updateContainerStatus(event) {
      try {
        var data = JSON.parse(event.data);
        var message = document.getElementById('message')
        var text = "";
        switch (data.text) {
          case "initialize":
            text = "Waking up";
            break;
          case "install":
            text = "Preparing";
            break;
          case "restart":
            text = "Starting";
            break;
          case "listening":
            text = "Ready";
            break;
          default:
            return;
        }
        message.innerHTML = text;
        document.title = text + " ・゚✧";
        if (data.text === 'listening') {
          window.location.reload(true);
        }
      } catch (e) {
        reloadAfterDelay();
      }
    }
  } catch (e) {
    reloadAfterDelay();
  }
}, 0);
</script>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36.

Challenge: Stock Price Checker

Link to the challenge: