0

Con Angular le envio la data a node/express. Despues node/express debe enviar esta data a la api mercadopago. Estaba teniendo error de CORS policy, buscando informacion encontre que debia agregar estas lineas en node/express:

  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');

pero desde Angular en la consola sigue mostrando el mismo error de CORS policy:

introducir la descripción de la imagen aquí

Aca envio la data desde ANGULAR.

sendData() {
    // creo array de compra
    let compra: Compramp[] = [];
    for (let book of this.bookList) {
      compra.push({
        title: book.name,
        unit_price: book.price,
        quantity: book.quantity
      });    
    }
    // aca servicio mercadopago
    this.mercadopagoService.checkout(compra).subscribe(
      res => {
        console.log(res);
      },
      err => console.error('Error al recibir la data de compra en el servidor. ' + err)
    );
  }

mi servicio mercadopago.service.ts

private SERVER = 'http://localhost:3000/checkout';

  constructor(private http: HttpClient) {
    if (!isDevMode()) {
      this.SERVER = 'https://bookstore-cds-server.herokuapp.com';
    }
  }

  checkout(compra: any) {
    return this.http.post(`${this.SERVER}`, compra);
  }

Aca NODE/EXPRESS

ruta

import { Router } from 'express'
const router = Router();
import { checkout } from '../controllers/mercadopago.controller';

router.post('/checkout', checkout);

Aca el controlador mercadopago.controller donde recibe la data desde Angular para hacer un redirect a la api.

// SDK de Mercado Pago
const mercadopago = require("mercadopago");
const bodyParser = require("body-parser");

import { Compramp } from "../compramp";

import { Request, Response } from "express";

mercadopago.configure({
  // el token es el de "produccion" que te da mercadopago, seria el token del vendedor el que recibe la plata.
  access_token:
    "APP_USR-xxxxxxxxx-xxxxxx-xxxxxxxxx-xxxxxx",
});

export const checkout = async (
  req: Request,
  res: Response,
  next
): Promise<Response> => {

  if (!req.body) {
    return res.status(400).json({
      status: 'error',
      error: 'req body cannot be empty',
    });
  }
  
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
  
  let compra = [
    {
      title: "",
      unit_price: 0,
      quantity: 0,
    },
  ];

  let items: Compramp[] = [];

  compra = req.body; // obtengo la data

  for (let data of compra) {
    items.push({
      title: data.title,
      unit_price: parseInt(data.unit_price.toString()),
      quantity: parseInt(data.quantity.toString()),
    });
  }

  try {

    let preference = {
      items,
    };

    mercadopago.preferences
      .create(preference)
      .then(function (response) {
        console.log(response.body);
        // redirije a pagina de mercadopago 'https://www.mercadopago.com.ar/checkout/v1/redirect?pref_id=xxxxxxxx-xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'
        res.redirect(response.body.init_point);
      })
      .catch(function (error) {
        console.log(error);
      });
 
  } catch (e) {
    console.log(e);
    return res.status(500).json("Internal server error");
  }
};  

1 respuesta 1

-1

Puedes probar colocando en tu archivo html principal esto dentro de la etiqueta head:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

Del lado del servidor (Express) te recomiendo usar https://www.npmjs.com/package/cors Puedes implementarlo de la siguiente manera

app.use(
        cors({
            origin: function (origin, callback) {
                if (!origin) return callback(null, true);
                // Dirección desde donde se pueden hacer peticiones
                if (!["http://localhost:3000"].includes(origin)) {
                    return callback(new Error(`La política CORS para el origen ${origin} no permiten el acceso al servidor.`), false);
                }
                return callback(null, true);
            }
        })
    )

Puedes checar información más detallada sobre errores cors aquí: https://developer.mozilla.org/es/docs/Web/HTTP/CORS/Errors

4
  • gracias por tu respuesta....acabo de hacer lo que publicaste,pero por consola desde node sale este error: Error: La política CORS para este origen no permite el acceso desde el origen en particular.
    – Claudio
    el 25 mar. 2021 a las 21:03
  • y este error desde la consola de Angular: Access to XMLHttpRequest at 'localhost:3000/checkout' from origin 'localhost:4200' 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
    – Claudio
    el 25 mar. 2021 a las 21:10
  • El primer error es porque no está permitiendo la conexión a tu servidor desde otra dirección diferente a "localhost:3000" edité mi respuesta para que añadas en el array las direcciones permitidas. el 26 mar. 2021 a las 22:09
  • Gracias por responder, pero sigo teniendo el mismo error de CORS policy
    – Claudio
    el 26 mar. 2021 a las 23:11

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.