Hola.
He creado con Node un pequeño backend que consume al api de búsqueda de Catálogo. Es decir esta Api: https://quest.myvtex.com/api/catalog_system/pub/products/search
cuando ejecuto el código funciona correctamente.
Lo que requiero es crear un catálogo a parte del sitio web, que muestre todos los productos de la tienda.
Para esto he creado una app con React que consume una ruta de express que se comunica con el back creado previamente. Sin embargo, recibo un bloqueo de Cors.
Ya intneté poner en el header el “Access-Control-Allow-Origin”: “*” pero sigue sin funcionar.
¿Podrían orientarme cual es la forma adecuada de consumir una appi mediante una app de Front-end externa?
Gracias.
Express:
const router = Router();
router.get('/categoria/:id', getCategory);
export default router;
Node:
let config = {
header: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
},
};
export const getCategory = async (req, res) => {
try {
// Recupera las variables enviadas desde el frontend
const { idCate } = req.params;
console.log(idCate)
// Realiza una solicitud a la API externa utilizando Axios
//const response = await axios.get(`https://quest.myvtex.com/api/catalog_system/pub/products/search?${idCate}`, config);
const response = await axios.get(`https://quest.myvtex.com/api/catalog_system/pub/products/search?${idCate}`, config);
// Envía la respuesta de la API externa al frontend
console.log(config)
res.json(response.data);
} catch (error) {
console.log(error)
}
}
React (Front)
const config = {
header: {
Accept: "*/*",
"Content-Type": "application/json",
}
}
const params = {
idCate: "fq=14&_from=1&_to=1"
}
function App() {
const [prodcuts, setProdcuts] = useState([])
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get("http://localhost:3000/products/categoria/" + params.idCate, config);
setProdcuts(response.data);
console.log(response);
} catch (error) {
console.log(error);
}
};
fetchData();
}, []);