Los problemas de dominio cruzado surgen debido a la política del mismo origen (same-origin policy) de los navegadores. Se considera que dos páginas tienen el mismo origen cuando compartan el mismo protocolo, host y puerto. Esta es una de las características fundamentales y más importantes de los navegadores, ya que garantiza la seguridad. Sin esta política, los navegadores sería extremadamante vulnerables a ataques.

Al realizar una solicitud a una API, si aparece el encabezado Access-Control-Allow-Origin en la respuesta, significa que la solicitud ha cruzado dominios.

¿Cómo Solucionar los Problemas de Dominio Cruzado?

1. Usando JSONP

JSONP (JSON with Padding) permite a las páginas web solicitar datos JSON de servidores externos mediante etiquetas script. El servidor recibe la solicitud y devuelve los datos envueltos en una función de callback especificada.

<script src="http://www.test.com/getData?callback=procesarDatos"></script>
// Solicitud al servidor test.com con un parámetro callback que especifica el nombre de la función de callback

// Manejo de los datos devueltos por la función de callback
<script type="text/javascript">
    // Los datos del servidor se pasarán como parámetro a esta función
    function procesarDatos(respuesta){
        // Procesamiento de los datos recibidos
        console.log(respuesta.datos)
    }
</script>

2. Usando jQuery AJAX

jQuery facilita la implementación de solicitudes JSONP a través de su método AJAX.

$.ajax({
  url: 'http://www.test.com:8888/obtenerDatos',
  type: 'get',
  dataType: 'jsonp',  // Especificamos que el tipo de solicitud es jsonp
  jsonpCallback: "manipularRespuesta",    // Nombre personalizado para la función de callback
  data: {}
})

3. Configuración en Vue.js

En proyectos Vue, podemos resolver problemas de dominio cruzado configurando el archivo vue.config.js en el directorio raíz del proyecto (si no existe, debemos crearlo).

 devServer: {
    proxy: {  // Configuración de dominio cruzado
      '/api': {
        target: 'http://121.121.67.254:8185/',  // Dirección del servidor backend (debe reemplazarse con la real)
        changOrigin: true,  // Permite el dominio cruzado
        pathRewrite: {
          /* Reescribe las rutas. Cuando en el navegador vemos la solicitud como:
             http://localhost:8080/api/nucleo/obtenerDatos/usuario
             en realidad se accede a:
             http://121.121.67.254:8185/nucleo/obtenerDatos/usuario
             porque se elimina /api en la reescritura
           */
          '^/api': '' 
        }
      },
    }
  },

Principio del proxy en Vue: El dominio se envía al servidor local (donde se ejecuta el proyecto Vue, usualmente en localhost:8080), y este servidor local realiza la solicitud real al servidor de destino.

Pasos para Implementar Dominio Cruzado en un Proyecto Vue:

1. En la configuración de proxy, establecer la dirección a la que se desea acceder y reescribir /api como una cadena vacía. Este paso es crucial porque la dirección real no incluye /api.
2. Al crear una instancia de axios, establecer baseURL en /api. Con esto, el problema de dominio cruzado estará resuelto.
3. Por ejemplo, si la dirección real es http://121.121.67.254:8185/nucleo/obtenerDatos/usuario, en el navegador veremos http://localhost:8080/api/nucleo/obtenerDatos/usuario. La presencia de /api no afecta la solicitud de datos.