AJAX entre dominios (CORS/JSONP)
Comprenda y aplique técnicas para realizar solicitudes AJAX entre dominios mediante JSONP o configurar cabeceras CORS en el servidor para intercambiar datos de forma segura.
AJAX entre dominios (CORS/JSONP) es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
AJAX entre dominios: el desafío
Cuando su sitio web intenta obtener datos de otro sitio web, se denomina solicitud AJAX entre dominios. ¡A menudo puede resultar complicado!
De forma predeterminada, los navegadores web aplican una regla de seguridad que impide que una página web realice solicitudes a un dominio distinto de aquel desde el que se originó. Esta regla protege sus datos.
Comprender la política del mismo origen
La regla de seguridad que acabamos de mencionar se denomina Same-Origin Policy (SOP). Es una función de seguridad fundamental de los navegadores.
La SOP establece que un navegador web permite que los scripts contenidos en una primera página web accedan a los datos de una segunda página únicamente si ambas tienen el mismo origen (dominio, protocolo y puerto).
- Ejemplo: una página de
mywebsite.comno puede obtener datos directamente deapi.anotherdomain.com.
CORS: una solución moderna
Para permitir solicitudes entre dominios de forma segura, la comunidad web desarrolló Cross-Origin Resource Sharing (CORS). Es la forma moderna y estándar de gestionar este problema.
CORS funciona permitiendo que el servidor indique explícitamente al navegador que determinados dominios externos pueden acceder a sus recursos.
CORS: configuración del servidor
CORS se configura principalmente en el servidor que proporciona los datos. El servidor envía encabezados HTTP especiales en su respuesta para indicar qué orígenes tienen permiso.
El encabezado clave es Access-Control-Allow-Origin. Especifica qué dominios pueden acceder al recurso.
Access-Control-Allow-Origin: *(permite cualquier dominio)Access-Control-Allow-Origin: https://yourdomain.com(permite únicamente un dominio específico)
CORS: solicitudes del cliente con jQuery
Desde el lado del cliente (mediante jQuery), realizar una solicitud CORS a menudo no es diferente de realizar una solicitud AJAX normal, siempre que el servidor esté configurado correctamente.
jQuery gestiona la comunicación a nivel del navegador. Solo debe dirigir la llamada $.ajax() a la URL entre dominios.
$.ajax({
url: "https://api.example.com/data", // Server must allow CORS
method: "GET",
success: function(data) {
console.log("CORS success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("CORS Error:", textStatus, errorThrown);
}
});CORS: solicitudes de comprobación previa (OPTIONS)
Para determinadas solicitudes CORS "complejas", los navegadores realizan una solicitud de comprobación previa antes de enviar la solicitud real. Es un paso de seguridad adicional.
Una solicitud de comprobación previa utiliza el método HTTP OPTIONS para pedir permiso al servidor. Si el servidor lo concede, el navegador envía entonces la solicitud real (por ejemplo, PUT, DELETE o solicitudes con encabezados personalizados).
JSONP: una alternativa antigua
Antes de que CORS se adoptara ampliamente, JSONP (JSON with Padding) era una solución habitual para las solicitudes entre dominios, especialmente en navegadores o API antiguos.
JSONP evita la Same-Origin Policy mediante el uso ingenioso del permiso que ofrecen los navegadores para cargar etiquetas <script> desde cualquier dominio.
JSONP: el mecanismo
Así funciona JSONP:
- Se crea dinámicamente una etiqueta
<script>y se establece su atributosrccon la URL entre dominios. - El servidor, que espera una solicitud JSONP, envuelve sus datos JSON en una llamada a una función (el «padding»).
- El navegador ejecuta este script y llama a una función definida globalmente en su página, pasando los datos como argumento.
JSONP: implementación con jQuery
jQuery simplifica considerablemente la implementación de JSONP. Solo debe especificar dataType: "jsonp" en su llamada $.ajax().
jQuery se encarga automáticamente de crear la etiqueta <script> dinámica, generar un nombre de callback único y ejecutarlo cuando llega la respuesta.
$.ajax({
url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
dataType: "jsonp",
success: function(data) {
console.log("JSONP success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("JSONP Error:", textStatus, errorThrown);
}
});CORS frente a JSONP: diferencias clave
Aunque ambos resuelven problemas entre dominios, CORS y JSONP tienen características distintas:
- CORS: estándar moderno, utiliza encabezados HTTP, es seguro, admite todos los métodos HTTP y requiere configuración en el servidor.
- JSONP: solución antigua, utiliza etiquetas
<script>, es menos seguro, solo admite solicitudes GET, es una técnica del lado del cliente y requiere que el servidor envuelva la respuesta.
Comprobación rápida: entre dominios
¿Cuáles de las siguientes afirmaciones son VERDADERAS con respecto a las solicitudes AJAX entre dominios?
Repaso: dominio de AJAX entre dominios
¡Ha aprendido a superar la Same-Origin Policy en las solicitudes AJAX entre dominios!
- CORS es el estándar moderno y seguro, basado en encabezados HTTP del servidor que conceden el permiso.
- JSONP es una solución antigua y menos segura para solicitudes GET, que utiliza etiquetas
<script>dinámicas.
Prefiera siempre CORS cuando sea posible, ya que es más seguro y flexible. JSONP se utiliza principalmente con sistemas antiguos o en situaciones específicas.
Preguntas frecuentes
¿La lección «AJAX entre dominios (CORS/JSONP)» es gratis?
Sí — el texto completo de «AJAX entre dominios (CORS/JSONP)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «AJAX entre dominios (CORS/JSONP)»?
Comprenda y aplique técnicas para realizar solicitudes AJAX entre dominios mediante JSONP o configurar cabeceras CORS en el servidor para intercambiar datos de forma segura. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «AJAX entre dominios (CORS/JSONP)»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración eficaz de solicitudes AJAX
- Gestión de errores y respuestas correctas de AJAX
- AJAX entre dominios (CORS/JSONP)