¿Cómo evitar el error CORS en Vuejs corriendo en un contenedor de muelles?

Tengo un Vue Frontend dentro de un contenedor docker que se conecta a un backend de Spring-boot en otro contenedor. El backend obtiene sus datos de un MongoDB (también en un contenedor). Cuando construyo mi frontend Vue en un contenedor docker, e intento obtener datos de la base de datos, obtengo un error CORS.

Access to XMLHttpRequest at 'http://localhost:8010/persons' from origin 'http://localhost:8080' has been blocked by CORS policy: La respuesta a la solicitud previa al vuelo no pasa el control de acceso: Ningún encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado.

Mi backend se ejecuta en un contenedor docker con puerto 8010 publicado y mi Vue frontend en un contenedor con puerto 8080. Permitir-cross-origin ya está establecido en mi backend.

este es el archivo de taquilla en mi frontend:

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . /app

RUN npm run build

EXPOSE 8080

CMD ["http-server", "dist"]

y construir la imagen con:

docker build -t frontend .

y

docker run -d -it -p 8080:8080 --name frontend frontend

Así que en Vue puse axios para:

axios.defaults.baseURL = "http://localhost:8010/";

axios.defaults.headers.get["Content-Type"] = "application/json";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.get["Access-Control-Allow-Origin"] = "*";

y hacer esta solicitud:

axios.get("/persons").then(res => {
        if (res.data.length === 0) {
          console.log("No Persons found!", res.data);
        }
        console.info("ready", res.data);
        for (let i in res.data) {
          this.persons.push(res.data[i]);
        }
      });

En mi backend de Spring-boot ya permito acceso cross-origin.

Y en modo de desarrollo todo funciona, porque puedo proxy la solicitud dentro del archivo vue.config.js con

devServer: {
  proxy: "http://localhost:8010"
  }

y yo mi navegador también puedo conectar a mi backend y cambiar. Sólo la aplicación vue no encuentra el backend. ¿Cuál es el problema? ¿Cómo puedo evitar el error de cors y llegar a mi backend?

Lo siento por mi mal inglés

Pregunta hecha hace 3 años, 4 meses, 26 días - Por webweaverx

2 Respuestas:

  • El error CORS que estás experimentando se debe a que el navegador impide las solicitudes entre dominios diferentes por motivos de seguridad. Para solucionar este problema, puedes seguir los siguientes pasos:

    • En tu backend de Spring-boot, asegúrate de que la configuración de CORS esté correctamente habilitada. Puedes agregar la siguiente anotación a tu clase de configuración de Spring `@CrossOrigin(origins = "http://localhost:8080")`, especificando el origen desde el que se permitirán las solicitudes.
    • En tu frontend de Vue, evita configurar manualmente los encabezados de CORS en axios. En lugar de eso, utiliza el proxy en el archivo `vue.config.js` para redirigir las solicitudes al backend. De esta forma, no será necesario especificar manualmente los encabezados CORS. Puedes configurar el proxy de esta manera:
    javascript
devServer: {
  proxy: {
    '/persons': {
      target: 'http://localhost:8010',
      changeOrigin: true
    }
  }
}
    • Asegúrate de que tu frontend Vue sea capaz de comunicarse con el backend a través del proxy configurado en el paso anterior.

    Después de realizar estos cambios, reconstruye tu imagen de Docker para el frontend y vuelve a ejecutar el contenedor. Con estas configuraciones, deberías poder evitar el error CORS y conectarte correctamente con tu backend desde el frontend Vue dentro de un contenedor de Docker.

    Respondida el Dec 20, 2020 a las 21:14 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    Cuando ejecutas tu aplicación Vue.js dentro de un contenedor Docker, obtienes un error CORS al intentar acceder a datos desde tu backend de Spring Boot.

    Solución:

    Para resolver el error CORS, debes configurar el encabezado Access-Control-Allow-Origin en tu backend de Spring Boot para permitir que el contenedor Vue.js acceda a sus recursos.

    Pasos para resolver el problema:

    • Configura el encabezado `Access-Control-Allow-Origin` en Spring Boot:

    Agrega lo siguiente a tu configuración de Spring Boot:

    java
   @Override
   protected void configure(HttpSecurity http) throws Exception {
       http.cors().and().csrf().disable();
   }

    Esto deshabilitará CSRF y configurará CORS para que permita todas las solicitudes de origen.

    • Verifica la configuración de CORS en Vue.js:

    Asegúrate de que la configuración de CORS en tu archivo vue.config.js sea correcta. Debe configurarse de la siguiente manera:

    javascript
   devServer: {
     proxy: "http://localhost:8010",
   }

    • Reconstruye y reinicia los contenedores:

    Después de realizar los cambios, reconstruye los contenedores Docker para tu backend de Spring Boot y tu frontend Vue.js. Luego, reinicia los contenedores para que los cambios surtan efecto.

    Explicación:

    El error CORS ocurre porque el navegador restringe el acceso a solicitudes entre orígenes diferentes por razones de seguridad. Al configurar el encabezado Access-Control-Allow-Origin en tu backend, permites que el navegador de tu frontend Vue.js acceda a los recursos de tu backend.

    Nota:

    Si aún experimentas problemas de CORS, asegúrate de que no haya otros factores que puedan estar causando el problema, como la configuración del firewall o la configuración del proxy.

    Respondida el Dec 20, 2020 a las 21:20 - por Gemini

    Votos positivos: 0 | Votos negativos: 0