soy novato. Estoy desarrollando un ecommerce en donde quiero implementar checkpro de mercado pago, tengo un error. Cuando pongo pagar el boton de la pasarella de pago aparece y desaparece constantemente. Si logro presionarlo en algun momento funciona pero algo estoy haciendo mal.Codigo lado Cliente
import React, { useState } from 'react';import axios from "axios"import { useContext } from 'react';import { dataContext } from '../Context/DataContext';import { Button, Container, Row, Col, Image} from 'react-bootstrap';import {initMercadoPago, Wallet} from "@mercadopago/sdk-react"import "../Carrito/carrito.css"const Carrito = () => { const {carrito, setCarrito}= useContext (dataContext); const [preferenceId, setPreferenceId]=useState(null) initMercadoPago('*******************'); const total= carrito.reduce ((acc, elemento)=> acc + parseInt(elemento.Precio * elemento.Cantidad), 0) const totalCantidadProductos= carrito.reduce ((acc, elemento)=> acc + parseInt(elemento.Cantidad), 0) const createPreference = async ()=>{ try{ const response = await axios.post ("http://localhost:5000/create_preference",{ description: "Mis compras", price: total, quantity:1 }) const {id}= response.data; return id; } catch (error){ console.log(error) } } const pagarCompra = async () =>{ const id= await createPreference (); if (id){ setPreferenceId (id) } }const sumarCantidad=({producto})=>{ producto.Cantidad=producto.Cantidad + 1}const restarCantidad=({producto})=>{ if (producto.Cantidad > 1){ producto.Cantidad=producto.Cantidad - 1 } } const vaciarCarrito=()=>{ setCarrito ([]) } const eliminarProducto=({producto})=>{const idAEliminar= carrito.find ((elemento)=> elemento._id === producto._id)const nuevoCarrito= carrito.filter ((elemento)=>{ return elemento !== idAEliminar}) setCarrito (nuevoCarrito) } return (<>{carrito.length === 0? <h1 className='titulo'>TU CARRITO ESTA VACIO</h1>:<><Container> {carrito.map ((producto)=><Row key={producto._id}><Col> <Image src={producto.Foto1.secure_url} rounded thumbnail className='producto' /></Col><Col><h6 className='texto-producto'>{producto.Producto}</h6></Col><Col><h6 className='texto-producto'>${producto.Precio}</h6></Col><Col><h6 className='texto-producto'>{`Cantidad: ${producto.Cantidad}`}</h6></Col><Col><h6 className='texto-producto'>{`Subtotal:$ ${producto.Cantidad * producto.Precio}`}</h6></Col><Col><Container className='texto-producto'><Button onClick={()=>restarCantidad({producto})} className="ms-2">-</Button><Button onClick={()=>sumarCantidad({producto})} className="ms-2">+</Button><Button variant="danger" className="ms-2" onClick={()=> eliminarProducto ({producto})}>Eliminar</Button></Container></Col></Row>)}</Container><Row style={{ position: 'fixed', bottom: 0}} className="justify-content-center w-100 footer-carrito"><Col className="py-2"><h4 className='text-footer'>Total en productos: $ {total}</h4></Col><Col className="p-0" md={4}><Button variant="danger" className="m-2" onClick={vaciarCarrito}> Vaciar Carrito</Button><Button variant="success" onClick={pagarCompra}> Finalizar Compra</Button> {preferenceId && <Wallet initialization={{ preferenceId }} />}</Col></Row></> }</> )}export { Carrito }CODIGO LADO SERVIDOR
import express from "express";import 'dotenv/config'import cors from "cors"import expresshbs from "express-handlebars"const app = express();app.use (cors());const PORT = process.env["PORT"] || 3000;import { connectToDB } from "./config/mongoose.js";import usuariosrouter from "../Tienda/usuarios/usuariosRutas.js"import productosrouter from "../Tienda/productos/productosRutas.js"import fileUpload from "express-fileupload";import mercadopago from "mercadopago";mercadopago.configure({ access_token: "*******************",}); connectToDB(); app.listen(PORT, (err) => { !err ? console.log(`Servidor corriendo en puerto: ${PORT}`) : console.log(`Servidor caido por error: ${err}`); });app.use(express.static(`public`));app.use(express.json());app.use(express.urlencoded({ extended: true }));app.locals.idapp.use( fileUpload({ useTempFiles: true,tempFileDir: "./uploads",}));app.engine (`.hbs`, expresshbs.engine ({ extname: `hbs` }))app.set(`view engine`, `hbs`)app.set (`views`, `./views`)app.post("/create_preference", (req, res) => { let preference = { items: [ { title: req.body.description, unit_price: Number(req.body.price), quantity: Number(req.body.quantity), } ], back_urls: {"success": "http://localhost:5173/","failure": "http://localhost:5173/","pending": "http://localhost:5173/" }, auto_return: "approved", }; mercadopago.preferences.create(preference) .then(function (response){ res.json ({ id: response.body.id }) }) .catch(function (error) { console.log(error); });});app.use("/productos", productosrouter)app.use("/usuarios", usuariosrouter)app.use("/", (req, res)=>{ res.render ("home")})EL ERROR QUE ME DICE ES:
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).