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");
  }
};  

2 respuestas 2

0
$ npm install cors

Instala cors en tu nodejs e importa de tu archivo principal index.js o app.js habilitando de manera global como middlewar usando app.use(cors()) :

 var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})
-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
    Commented 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
    Commented 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. Commented el 26 mar. 2021 a las 22:09
  • Gracias por responder, pero sigo teniendo el mismo error de CORS policy
    – Claudio
    Commented el 26 mar. 2021 a las 23:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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