Error CORS

[AlexanderGoi]

Hola Ya voy en el parte del curso de los chatbots, pero queria realizar unos cambios para ver si podia ver al aplicación desde fuera.

Pero me sale este error, ya agregue de el lado del backEnd la parte del Middleware - Cross y en el Kernel.php

Pero sigue marcando el error, ya trate varios metodos, pero tengo la duda si realmente es el backEnd

Saludos..!!

[BCIPRIANR]

Amigo buen dia en la parte del front no te canto ningun error ?

[AlexanderGoi]

Buen día @BCIPRIANR

Solo esos errores del Cors, a nivel del FrontEnd, en lugar de que apuntará mis peticiones al localhost (ahí si funciona sin problema) las direcciono a la url q me generaba el ngrok lo cual debería funcionar, pero como son diferentes servidores, es ahí cuando marca este error

[vinixcode]

Hola @AlexanderGoi

La verdad que no he probado usar directamente la URL de ngrok desde localhost. Yo apostaría que lo que ocurre es que el servidor de ngrok no está pasando todas las cabeceras que Laravel está devolviendo, incluyendo la de Access-Control-Allow-Origin.

Yo intentaría creando una cuenta ngrok, conectándola a tu instalación local de ngrok y luego yendo a la configuración desde su sitio web y mirando la configuración del tunnel a ver si te permite hacer ajustes a las cabeceras que se envían.

Prueba y nos cuentas! Saludos.

[AlexanderGoi]

@vinixcode ok, hare lo que me dices.

También tengo otra duda, tal ves es basico pero apenas voy conociendo todo este tema web. Si quisiera ver el sitio localhost:3000 el cual se generar al ejecutar el npm run dev, que comando o que debo incluir en el archivo package.json para que en lugar de localhost, se establesca la IP del servidor un ejemplo 198.168.4.136:3000.

Muchas gracias por la atención.

[AlexanderGoi]

Ya pude solucionarlo, eran con los comandos que se mencionan en el proyecto, primero ejecute el npm run build y luego el npm run generate, y con eso se formaba la carpeta /dist/ Pero hay alguna forma de modificar los paths, de tengan IP:Puerto/curso_whatsappp/.... para no tener que borrar el contenido en mi caso del htpdocs y dejar solo el codigo de esta aplicación

[AlexanderGoi]

@vinixcode haa también me faltaba mencionar, para que funcionará la ruta de ngrok si se pudo, solo que al tratar de correrlo de manera dev no se podía, únicamente ya en generate dado que el backEnd y el FrontEnd están mediante el túnel de ngrok, si tarde un leve momento en realizar las peticiones pero funciona.. muchas gracias

[vinixcode]

Me alegra saber que pudiste solucionar el problema @AlexanderGoi

Los paths los tendrías que modificar directamente en el código, o usar una variable de entorno y definirla en el archivo nuxt.config.js . Aquí puedes ver más información: https://nuxtjs.org/docs/configuration-glossary/configuration-env/

Cerraré el ticket ya que el problema inicial se solucionó. Saludos.

[TomasS-R]

Hola! comento este issue debido a que estoy con un problema de CORS como bien se menciona arriba Alexander, en mi caso tengo el backend corriendo en nodejs, y este esta subido en fly.io y me pasaba lo mismo, para arreglarlo hice lo siguiente:

Instale el paquete cors en mi proyecto con el comando: npm i cors --save

Luego en el archivo index donde eh declarado el host y el port llamo a este mismo mediante: const cors = require("cors");

Una vez hecho esto le indico a app que es nuestra aplicacion de express haga uso de la libreria de Cors const app = express(); app.use(cors());

Y luego de desplegarlo en fly.io y ver en la consola, ya no sale el error...

IMPORTANTE: Luego de eso ya no sale el error de cors en la consola, ya que lo habilitamos para todas las url´s (recomiendo ver la documentación de esta librería ya que ahí estarían expuestos a cualquier url, y deberíamos declarar las "whitelist" para no quedar tan vulnerables).

[vinixcode]

Muy útil este valioso aporte. Gracias @TomasS-R