如何访问我在 react.j 的本地主机 node.js 中创建的 api

Question

I am trying to create a covid cases app with react.js, node.js, and puppeteer. With node.js and puppeteer I created an api. This is my code for node.

const puppeteer = require("puppeteer")
var http = require("http")
var fs = require("fs")
let dataExplained = {}
async function getCovidCases(){
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    const url = "https://www.worldometers.info/coronavirus/#countries"
    await page.goto(url, {waitUntil: 'networkidle0'})
    const results = await page.$$eval(".even", navBars => {
        return navBars.map(navBar => {
          const anchors = Array.from(navBar.getElementsByTagName('td'));
          return anchors.map(anchor => anchor.innerText);
        });
      })
      browser.close()
      dataExplained.country = results[15][1]
      dataExplained.totalCases = results[15][2]
      dataExplained.newCases    = results[15][3]
      dataExplained.totalDeaths    = results[15][4]
      dataExplained.newDeaths    = results[15][5]
      dataExplained.totalRecovered    = results[15][6]
      dataExplained.activeCases    = results[15][7]
      dataExplained.critical    = results[15][8]
      dataExplained.totalCasesPerMillion    = results[15][9]
      dataExplained.deathsPerMillion    = results[15][10]
      dataExplained.totalTests    = results[15][11]
      dataExplained.totalTestsPerMillion    = results[15][12]
      dataExplained.population = results[15][13]
      var server = http.createServer((req, res) => {
        if (req.url === "/api/covid/canada"){
          res.writeHead(200, {"Content-Type": "application/json"})
          res.end(JSON.stringify(dataExplained))
        }
      })
      server.listen(8080, "127.0.0.1")
      console.log("wooh sent")
}
getCovidCases()

This is the json file it outputs to localhost 8080:

{"country":"Canada","totalCases":"582,697","newCases":"+1,302","totalDeaths":"15,606","newDeaths":"","totalRecovered":"489,819","activeCases":"77,272","critical":"711","totalCasesPerMillion":"15,371","deathsPerMillion":"412","totalTests":"13,775,115","totalTestsPerMillion":"363,376","population":"37,908,690"}

Then I tried to access that json api file in my react.js file. This is my code:

  fetch("http://localhost:8080/api/covid/canada")
  .then(req => req.json())
  .then(myJson => console.log(myJson)

But it gave me multiple errors: Access to fetch at 'http://localhost:8080/api/covid/canada' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. GET http://localhost:8080/api/covid/canada net::ERR_FAILED How Do I Fix This?

Answer 1

CORS is just a default security mechanism that browsers have. MDN has a good resource about it .

To be able to your Node API send the response, just add:

res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000")

before res.end(JSON.stringify(dataExplained))