0

I'm getting the following error when trying to call a third-paty API through React:

Access to XMLHttpRequest at 'https://superheroapi.com/api/apikey/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The API is www.superheroapi.com/api

The ideal solution I found was to create a proxy server with Express to call the API from there. Since I have zero background in back-end dev, I'm struggling to make it work. Here's how far I have progressed, but it is still showing the error and not calling the API.

This is my server.js

const express = require("express")
const app = express()
const cors = require("cors")
const { default: axios } = require("axios")

app.use(cors())

app.get("/",() => {
      response = await axios.request("https://superheroapi.com/api/apikey")
     .then((response)=>{
         console.log(response);
     }
     )
    })

app.listen((3001), ()=>{
    console.log("express on port 3001");
})

this is my App.js

import './App.css';
import axios from 'axios';


function App() {

const getAPI =  {
  method: "GET",
  url: "https://superheroapi.com/api/apikey/",
}

axios.request(getAPI)
.then((response) => {
    console.log(response);
})
.catch((error) => {
    console.error(error);
});


  return (
    <>
    <h1>hello world</h1>
    </>
  );
}

export default App;
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Amadeo de la Peña
  • 51
  • 7
  • You need to consume the response in your server code. You’re getting that error because you code is causing the response to be sent to your frontend code. You need to not send the `https://superheroapi.com/api/apikey` response to your frontend code but instead consume that response in your server-side code, and then from that create a response that you send to your frontend code. – sideshowbarker Sep 24 '21 at 14:33

2 Answers2

0

Make the API call to the express server from your App.js.

const getAPI =  {
  method: "GET",
  url: "http://localhost:3001/"
}

Secondly, I think your express server implementation is not correct. It should be something like this,

    app.get("/", async (req, res) => {
         const response = await axios.request("https://superheroapi.com/api/apikey");
         res.send(response);
     });

You can go through the ExpressJS documentation for that.

Antajo Paulson
  • 555
  • 1
  • 4
  • 15
  • Now it appears a different error:rror: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:99) console. @ index.js:1 overrideMethod @ react_devtools_backend.js:4049 (anonymous) @ App.js:16 :3001/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED – Amadeo de la Peña Sep 24 '21 at 14:56
  • It basically says the connection to the proxy server `http://localhost:3001/` is not working. Check whether your proxy server is running properly. – Antajo Paulson Sep 24 '21 at 14:59
-1

var cors = require('cors') var app = express()

app.use(cors())

Refer : Enable CORS in my React App with Node.js backend

HarshaHR
  • 73
  • 4