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;
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.
var cors = require('cors') var app = express()
app.use(cors())