How to link express proxy to react in order to resolve CORS header error?-CodePudding

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;

CodePudding user response：

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.

CodePudding user response：

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

app.use(cors())

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

CodePudding user response：

Try adding headers.

One way to do it is with middleware, as per this example:

app.use(function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});