Usando JSONP con Ajax, de una manera rapida

Aquellos que nos hemos enfrentado varias veces al mensaje de “XMLHttpRequest cannot load http://192.168.1.109/settings/get. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin”, pueden reconocer inmediatamente el problema relacionado al Cross-Domain. El problema en terminos simples se relaciona a que un sitio en un dominio X, por razones de seguridad, no puede acceder mediante ajax o incluso sockets a otro dominio Y. En nuestro caso el sitio X es http://localhost:8888 y el sitio Y que contiene el servicio es http://192.168.1.109/settings/get, este es un problema bastante comun y Eduard Tomas lo explica magistralmente en una reciente entrada

Eduard muestra la solucion utilizada en .NET haciendo uso de los MediaTypeFormatters, este mecanismo explicado hace practicamente transparente el procesamiento de las peticiones con jsonp, considero que es una solucion elegante y tambien muestra en el mismo articulo la solucion mas apropiada, que es la utilizacion de CORS.

Entonces que hago yo ‘escribiendo’ sobre JSONP?, pues es solo exponer mi experiencia y un workaround que utilice en algun momento antes de la aparicion de CORS y de decirle adios definitivamente a JSONP, bueno no tan definitivamente :). Empecemos.

Lado del Servidor

El ‘secreto’ de usar JSONP y Ajax, es el famoso callback en el que se encierra los datos retornados por el servidor.

En .NET la idea es tener un metodo en el controlador que devuelva lo siguiente:

image

En NodeJs, se tiene un similar metodo usando Express, debo advertir que con NodeJs se requiere un poco mas de configuracion, me refiero al codigo que anda por alrededor del app.get y seria lo siguiente:

image

Lado del Cliente

Hasta aqui tenemos la mitad del camino recorrido, la otra mitad se encuentra en el cliente/browser, donde se invoca al servicio REST, de la siguiente manera:

image

La url no es un tema muy relevante, porque depende del servicio al que se invoque, los elementos importantes son el datatype, que especifica el parametro jsonp y finalmente el otro atributo llamado jsonpCallback, que debe contener el nombre exacto de la funcion en la que se envolvio el resultante json.

Consideraciones

Este workaround solamente funciona en proyectos MVC y no en MVC WebApi, los proyectos WebApi justamente usan el mecanismo explicado por Eduard ese o CORS.

Este es un mecanismo inseguro, por lo que solamente deben usarlo en caso de tener que necesiten hacer alguna prueba de concepto rapidamete, es util, luego es mejor usar CORS.

Agradecer a un amigo, Yecid que me ayudo a encontrar este mecanismo.

Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *