Estoy trabajando en un pequeño proyecto en reaccionar y express.js
el código express.js (Backend)
app.post('/api/search', (req, res) => { // res.setHeader("Access-Control-Allow-Origin", "*"); axios.get("[REDACTED]" + req.body.searchtxt + "&limit=100").then((response) => { res.json({status: "ok", result: response.data}) }) })y aqui el front-end
function SearchPage() { const { searchText } = useParams() const [SearchTxt, setSearchTxt] = useState(searchText) useEffect(()=>{ fetch('http://localhost:8080/api/search', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, mode: 'cors', body: JSON.stringify({searchtxt: searchText}) }).then((res) => { res.json().then((resjson) => { console.log(resjson) }) }) },[]) }pero muestra esto:
Access to fetch at 'http://localhost:8080/api/search' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Lo intenté con Access-Control-Allow-Origin configurado en localhost:3000 pero no funciona
El navegador envía solicitudes de verificación previa de OPTIONS de forma predeterminada al enviar una solicitud. Por lo tanto, también debe enviar el encabezado Access-Control-Allow-Origin para esa solicitud.
La solución más fácil es usar el paquete cors middleware. Puedes usarlo así:
const cors = require('cors'); app.post('/api/search', cors(), (req, res) => { res.setHeader("Access-Control-Allow-Origin", "*"); axios.get("[REDACTED]" + req.body.searchtxt + "&limit=100").then((response) => { res.json({status: "ok", result: response.data}) }) })