es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de CORS en Firebase Storage en Vue.js y Nuxt.js

27 May, 2023 Programación

Estoy intentando descargar un archivo .pdf almacenado en firebase-storage desde mi aplicación web (Vue.js + Nuxt.js), pero obtengo este error:

El acceso a fetch a ‘https://firebasestorage.googleapis.com/v0/b/*******/o/chats%2F96U5ERFOmHBGswQhDhaR%2Fdc8c9b64-6bdb-4cd0-b0a9-f59e18f10113?alt=media’ desde el origen ‘https://example.com’ ha sido bloqueado por la política CORS: no se encuentra la cabecera ‘Access-Control-Allow-Origin’ en el recurso solicitado. Si una respuesta opaca satisface tus necesidades, establece el modo de la solicitud en ‘no-cors’ para recuperar el recurso con CORS deshabilitado.

Lo que he intentado hasta ahora es instalar @nuxtjs/proxy y configurarlo de esta manera:

nuxt.config.js

proxy: [‘https://firebasestorage.googleapis.com/v0/b/*************’],
modules:[
‘@nuxtjs/proxy’,
]

Pero el error sigue presente.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error está relacionado con la política CORS (Compartir Recursos de Origen Cruzado), que es una función de seguridad implementada por los navegadores para prevenir que una página web acceda o manipule recursos que provienen de un dominio diferente sin el permiso explícito del servidor que aloja esos recursos.

    Para solucionar este error y acceder al archivo .pdf almacenado en Firebase Storage desde su aplicación web (Vue.js + Nuxt.js), debe configurar la configuración CORS para su proyecto Firebase.

    Aquí están los pasos a seguir:

    1. Vaya a la Consola de Firebase y seleccione su proyecto.

    2. Haga clic en la pestaña Almacenamiento del menú de la izquierda.

    3. Haga clic en la pestaña Reglas del menú de Almacenamiento.

    4. Reemplace las reglas predeterminadas con las siguientes reglas:

    servicio firebase.storage {
  coincidencia / b / {cubo} / o {
    coincidencia / {allPaths = **} {
      permitir origen: ["https://ejemplo.com"];
      permitir encabezados: ["Content-Type", "Autorización", "X-Requested-With", "Aceptar"];
      permitir métodos: ["GET", "PUT", "POST", "DELETE", "OPTIONS"];
    }
  }
}

    Nota: Reemplace `https://ejemplo.com` con la URL de su sitio web.

    1. Haga clic en el botón Publicar para guardar los cambios.

    Una vez que haya configurado la configuración CORS, debería poder acceder al archivo .pdf almacenado en Firebase Storage desde su aplicación web sin ningún error.

    Nota: No necesita instalar y utilizar el módulo @ nuxtjs / proxy para solucionar este error.

Comments are closed.