Así que alojé mi sitio web en heroku. todo salió bien y funcionó bien hasta que entré en la página donde se estaba usando la función de búsqueda. En consola (producción) dice
Failed to load resource: net::ERR_CONNECTION_REFUSED QuestionsList.js:9 Uncaught (in promise) TypeError: Failed to fetch at QuestionsList.js:9:19 at s (runtime.js:63:40) at Generator._invoke (runtime.js:294:22) at Generator.next (runtime.js:119:21) at r (asyncToGenerator.js:3:20) at i (asyncToGenerator.js:25:9) at asyncToGenerator.js:32:7 at new Promise (<anonymous>) at asyncToGenerator.js:21:12 at QuestionsList.js:8:18mi código en el componente de la lista de preguntas es
const QuestionsList = () => { const [data, setdata] = useState([]); const fetchData = async () => { var x = await fetch("http://localhost:4000/api/v1/post"); var parsedData = await x.json(); setdata(parsedData.posts); }; useEffect(() => { fetchData(); }, []); return ( <> <div className="container"> <h2 className="heading-mid currentAffairs mt-3 pt-3"> Current Affairs!!{" "} </h2> <div className="row"> {data.map((element) => { return ( <div className="col md-4" key={element.imageUrl}> <Question url={element.imageUrl} /> </div> ); })} </div> </div> </> ); };Creo que el problema está en var x = await fetch("http://localhost:4000/api/v1/post"); pero no puedo averiguar qué escribir en lugar de localhost (sé que tengo que escribir mi nombre de dominio). Como si cambiara el dominio después de un tiempo. Entonces, en lugar de codificar, ¿hay alguna otra manera? Gracias por adelantado.
Acabo de codificar hotname en lugar de localhost. ¡Gracias!
Creo que tienes que agregar cors orgin a tu servidor api de descanso
var express = require('express') var cors = require('cors') var app = express() var corsOptions = { origin: 'http://heroku .....com', optionsSuccessStatus: 200 } //... app.listen(80, function () { console.log('CORS-enabled web server listening on port 80') })