0

He tratado de realizar transacciones de prueba, pero no he podido por este error, hace un tiempo me funcionaba bien en otro proyecto con django (python), pero ahora utilizando vue no he logrado hacer que funcione Error de CORS

Este es el template que he utilizado para poder hacer las pruebas antes de pasarlo a un template funcional

<template>
   <div>
     <h1>Prueba de Webpay Plus</h1>
     <form method="post" :action="response.url" v-if="response">
         {{response.url}}
         {{response.token}}

         <input type="hidden" name="token_ws" :value="response.token" />
         <input type="submit" value="Ir a pagar" />
     </form>
   </div>
</template>

<script>
import { WebpayPlus } from 'transbank-sdk'
import { Options, IntegrationApiKeys, Environment, IntegrationCommerceCodes } from 'transbank-sdk'
import { ref, onMounted } from 'vue'

export default {
name: 'WebpayPlusTest',
setup() {
    let response = ref(null)
    const buyOrder = 'ordenCompra123';
    const sessionId = 'sesion123';
    const amount = 1000;
    const returnUrl = 'http://localhost:8080/webpayplusresult';
    const tx = new WebpayPlus.Transaction(new Options(IntegrationCommerceCodes.WEBPAY_PLUS, IntegrationApiKeys.WEBPAY, Environment.Integration));

    const transaction = async () => {
        try {
            response.value = await tx.create(buyOrder, sessionId, amount, returnUrl);
            console.log(response)
            return response
        } catch (e) {
            console.log("Error", e)
            return null
        }
    }

    onMounted(async () => {
        await transaction()
    })

    return {
        response,
    }
}
1
  • La documentación no te dice que para requests tiene que ser desde el backend y no desde el frontend? Algunas páginas/servicios/etc. están configurados así.
    – René
    Commented el 26 ago. 2023 a las 0:21

3 respuestas 3

0

Para poder solucionar ese bloqueo. primero debes de entender esta lectura que te dejare. y luego hacer tus debidas configuraciones en tu servidor asi como en el cliente.

¿Qué es la política de restricción de origen cruzado (CORS)? La política de restricción de origen cruzado (CORS) es un mecanismo de seguridad implementado en los navegadores web para controlar las solicitudes de recursos (como imágenes, scripts y datos) entre diferentes dominios. Su propósito es prevenir ataques y proteger la seguridad de los usuarios al permitir a los servidores especificar quiénes pueden acceder a sus recursos.

Cómo configurar CORS correctamente: Para evitar el bloqueo de CORS y permitir interacciones seguras entre dominios, sigue estos pasos:

Configuración del servidor: Ajusta tu servidor para que envíe las cabeceras CORS en las respuestas a las solicitudes. Esto generalmente se hace a través de la configuración del servidor o el código de la aplicación.

Cabeceras CORS en las respuestas: Incluye estas cabeceras CORS en las respuestas del servidor:

Access-Control-Allow-Origin: Indica qué dominios pueden acceder. Puedes usar "*" para permitir cualquier dominio, pero es menos seguro. Access-Control-Allow-Methods: Especifica los métodos HTTP permitidos, como GET, POST, etc. Access-Control-Allow-Headers: Define los encabezados personalizados que se pueden incluir en las solicitudes. Access-Control-Allow-Credentials: Si necesitas autenticación basada en cookies, establece esto en true. Gestión de pre-vuelo y solicitudes simples: Asegúrate de manejar adecuadamente las solicitudes de pre-vuelo (OPTIONS) que algunos navegadores envían antes de solicitudes más complejas. Ajusta tu servidor para responder correctamente a estas solicitudes.

Configuración en el cliente: Si haces solicitudes desde el lado del cliente (por ejemplo, desde JavaScript), configura las solicitudes con los encabezados adecuados. Considera el uso de withCredentials si trabajas con autenticación basada en cookies.

2
  • Vale entonces.. mi middleware de strapi, quedo así module.exports = [ { name: 'strapi::cors', config: { origin: '', methods: ['GET', 'POST'], headers: [''], }, }, ]; Y ahora mi vue.config.js quedo así module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: 'http:// localhost:1337', } }) pero sigo teniendo el mismo error mmmm que estaría mal o me faltaría
    – xhx
    Commented el 25 ago. 2023 a las 14:36
  • en origin y headers hay un asterisco, para indicar que permita todo, solo que stack overflow los elimina
    – xhx
    Commented el 25 ago. 2023 a las 14:43
0

En el archivo del servidor tienes que permitir el acceso. Osea que en tu settings.py o el archivo al que accedas tienes que ponerle encabezados que permiten la comunicación e ignoran las cors, simplificado añade esto:

ALLOWED_HOSTS = ['localhost','127.0.0.1'] o ALLOWED_HOSTS = ['localhost:8080','127.0.0.1:8080']

Cambia las ips si estas usando un server, pero por lo que vi no. Prueba con los dos encabezados sin el puerto y con el.

0

Debes verificar que entre tus librerias este instalado el CorsHeaders. Ademas en tu archivo Settings debes agregar los parametros correspondientes:

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = [
    'https://localhost:8080',
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'verificacion',
    'rest_framework',
    "corsheaders",
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    "corsheaders.middleware.CorsMiddleware",
]

Aquí te dejo el enlace a un pequeño curso que hice hace un tiempo donde explican como solucionar este error en el minuto 7:00. Espero haber podido ayudarte.

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.