Recibo el siguiente error cuando intento llamar a una API de terceros a través de React:
El acceso a XMLHttpRequest en 'https://superheroapi.com/api/apikey/' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS: No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado.
La API es www.superheroapi.com/api
La solución ideal que encontré fue crear un servidor proxy con Express para llamar a la API desde allí. Como no tengo experiencia en desarrollo de back-end, estoy luchando para que funcione. Esto es lo que he progresado, pero aún muestra el error y no llama a la API.
Este es mi servidor.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"); })esta es mi aplicación.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;Realice la llamada API al servidor express desde su App.js
const getAPI = { method: "GET", url: "http://localhost:3001/" }En segundo lugar, creo que la implementación de su servidor express no es correcta. Debería ser algo como esto,
app.get("/", async (req, res) => { const response = await axios.request("https://superheroapi.com/api/apikey"); res.send(response); });Puede revisar la documentación de ExpressJS para eso.
var cors = require('cors') var app = express()
app.use(cors())
Consulte: habilite CORS en mi aplicación React con el backend Node.js