Making XMLHttpRequest in Vercel

Question

I am trying to use Vercel to query other APIs. I am able to have the Vercel server receive a query and return an appropriate value. I am also able to make the XMLHttpRequest from another js file with no trouble. The problem comes when I try to insert the XMLHTTPRequest into my Vercel server.

module.exports = (req, res) => {
  const { name = "World" } = req.query;
  var newReq = new XMLHttpRequest();
  newReq.open("GET", url);
  newReq.setRequestHeader("Authorization", authKey);
  newReq.send();
  newReq.addEventListener("load", function () {
    if (newReq.status == 200 && newReq.readyState == 4) {
      var response = JSON.parse(newReq.responseText);
      result = `
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  <text x="0" y="15" fill="red">${response}</text>
</svg>`;
      res.writeHead(200, { "Content-Type": "image/svg+xml" });
      res.write(result);
      res.end();
    }
  });
};

Whenever I try to access the server now I get a 502 bad gateway error. I believe the error is with making another HTTP request within the current Vercel server. I'm not sure how to accomplish this.

Any tips would be greatly appreciated!

Answer 1

Solved using http and node-fetch. In case anyone else has similar problems in the future.

const http = require("http");
const url = require("url");
const fetch = require("node-fetch");

http
  .createServer(async (req, res) => {
    const reqURL = url.parse(req.url, true);
    const { userID } = reqURL.query;

    var headers = { Authorization: "..." };

    const newResponse = await fetch(
      `newURL`,
      { method: "GET", headers: headers }
    );