Varios tutoriales de dominio cruzado, diversas prácticas y varias preguntas y respuestas en línea. Además de JSONP simple, muchas personas dicen que CORS no está funcionando, y siempre carecen de una o dos configuraciones clave. Este artículo solo quiere resolver el problema, y todo el código ha sido practicado por usted mismo.
Este artículo resuelve problemas como Get, Post, Data y Cookies en Dominio cruzado.
Este artículo solo hablará sobre las solicitudes y las solicitudes de publicación. Los lectores deben comprender las solicitudes de publicación como todos los demás métodos de solicitud, excepto las solicitudes.
Jsonp
JSONP utiliza el principio de que el navegador no tiene restricciones homológicas en las referencias de recursos de script, e inserta dinámicamente una etiqueta de script, y se ejecutará inmediatamente después de que el recurso se cargue en la página. JSONP es un protocolo de transmisión informal. Uno de los puntos clave de este protocolo es permitir a los usuarios pasar una devolución de llamada o definir un método de devolución de llamada al principio, y los parámetros se dan al servidor. Cuando el servidor devuelve datos, el parámetro de devolución de llamada se utilizará como nombre de función para envolver los datos JSON, para que el cliente pueda personalizar sus propias funciones para procesar automáticamente los datos de retorno.
JSONP solo admite las solicitudes GET, pero no otros tipos de solicitudes HTTP, como POST. Solo admite solicitudes HTTP de dominio cruzado. No puede resolver el problema de cómo hacer llamadas de JavaScript entre dos páginas en diferentes dominios. La ventaja de JSONP es que admite navegadores a la antigua, y las desventajas también son obvias: requiere la personalización del cliente y el servidor para el desarrollo. Los datos devueltos por el servidor no pueden ser datos JSON estándar, sino datos envueltos por devolución de llamada.
El principio de JSONP es muy simple, y utiliza la idea de [no hay problema de dominio cruzado cuando el front-end solicita recursos estáticos].
Pero solo es compatible con Get, solo es compatible con Get, solo admite GET.
Tenga en cuenta que dado que este método se llama JSONP, los datos de backend deben usar datos JSON. No puede hacer una cadena o algo casualmente, de lo contrario encontrará el resultado inexplicable.
Método de escritura jQuery frontal
$ .AJAX ({type: "get", url: baseUrl + "/jsonp/get", DataType: "JSONP", Success: Function (Respuesta) {$ ("#Respuesta"). Val (Json.Stringify (Respuesta));}});DataType: "JSONP". Excepto por esto, otras configuraciones son las mismas que las solicitudes normales.
Configuración de Backend SpringMVC
Si también usa SpringMVC, configure un consejo JSONP, para que cada método de controlador que escribamos no sea necesario considerar si el cliente solicita JSONP, y Spring lo manejará automáticamente en consecuencia.
@ControllerAdVicePublic Class JSONPAdVice extiende AbstractJsonPresponseBodyAdVice {public jsonpadvice () {// De esta manera, si la solicitud contiene el parámetro de devolución de llamada, Spring sabrá que esta es una solicitud JSONP Super ("Callback"); }}El método de escritura anterior requiere que la versión SpringMVC no sea inferior a 3.2, y solo puedo decir que debe actualizar.
Backend Configuración no SpringMVC
Cuando comencé a trabajar, Struts2 todavía era popular. Después de unos años, SpringMVC básicamente dominó el mercado interno.
Sea perezoso, aquí hay un pseudocódigo, y haga clic en el método de envoltura antes de que nuestro método vuelva a la parte delantera:
@ControllerAdVicePublic Class JSONPAdVice extiende AbstractJsonPresponseBodyAdVice {public jsonpadvice () {// De esta manera, si la solicitud contiene el parámetro de devolución de llamada, Spring sabrá que esta es una solicitud JSONP Super ("Callback"); }}CORS
Compartir recursos de origen cruzado
Cors es una forma en que los navegadores modernos admiten solicitudes de recursos de dominio cruzado. El nombre completo es "OriginResourceStearing". Al enviar una solicitud usando XMLHTTPRequest, el navegador considera que la solicitud no cumple con la política del mismo origen, y agregará un encabezado de solicitud a la solicitud: Origin. El fondo realiza una serie de procesamiento. Si se determina que acepta la solicitud, se agrega un encabezado de respuesta al resultado de retorno: Access-Control-Allow-Origin; El navegador determina si el encabezado correspondiente contiene el valor de origen. Si lo hay, el navegador procesará la respuesta y podemos obtener los datos de respuesta. Si el navegador no incluye el navegador, no podemos obtener los datos de respuesta.
Cors y JSONP usan el mismo propósito, pero es más poderoso que JSONP. CORS admite todos los tipos de solicitudes de navegador, y la cantidad de datos solicitados es mayor y más abierto y conciso. El servidor solo necesita devolver los datos procesados directamente, y no hay necesidad de procesamiento especial.
Después de todo, JSONP solo admite solicitudes GET, que definitivamente no pueden satisfacer todas nuestras necesidades de solicitud, por lo que Cors necesita ser trasladado.
Los desarrolladores web nacionales siguen siendo bastante difíciles. Los usuarios no actualizan sus navegadores, y el jefe todavía quiere que los desarrolladores sean compatibles.
Cors admite los siguientes navegadores. En la actualidad, los problemas del navegador se están volviendo cada vez menos importantes, e incluso Taobao no admite IE7 ~~~
Chrome 3+
Firefox 3.5+
Ópera 12+
Safari 4+
Internet Explorer 8+
Método de escritura jQuery frontal
Solo mira el código:
$ .AJAX ({type: "post", url: baseUrl + "/jsonp/post", dataType: 'json', crossdomain: true, xhrfields: {withCredentials: true}, data: {name: "name_from_frontend"}, éxito: función (respuesta) {console.log (respuesta) // The returned json data $ ("#respuesta"). Val (json.stringify (respuesta));DataType: "Json", aquí está JSON, no JSONP, no JSONP, no JSONP.
CrossDomain: Verdadero, aquí significa usar solicitudes de dominio cruzado
XHRFIELDS: {WithCredentials: True}, para que la configuración pueda traer las cookies, de lo contrario ni siquiera podemos mantener la sesión, y muchas personas están atrapadas aquí. Por supuesto, si no tiene este requisito, no necesita configurar esto.
Configuración de Backend SpringMVC
Para la mayoría de los proyectos web, generalmente hay clases de configuración relacionadas con MVC, que se heredan de WebMVCConfigurerAdapter. Si también usa SpringMVC 4.2 o superior, simplemente agregue este método como el siguiente:
@ConfigurationPublic Class WebConfig extiende WebMVCConfigurerAdapter {@Override public void addCorsMappings (CorSregistry Registry) {Registry.AddMapping ("/**/*"). PermitidoRigins ("*"); }}Si desafortunadamente está en su proyecto, la versión SpringMVC es inferior a 4.2, entonces debe "guardar el país a través de las curvas":
La clase pública CrossDomainFilter se extiende OnceperRequestFilter {@Override protegido void dofilterInternal (httpservletRequest request, httpServletResponse Response, filterChain FilterChain) lanza ServletException, IOException {Response.AddHeader ("Access-Control-AllOW-Origin", " *"); en respuesta.AddHeader ("Access-Control-allow-credencials", "verdadero"); Respuesta.AddHeader ("Access-Control-Allow-Methods", "obtener, publicar, poner, eliminar"); Respuesta.AddHeader ("Access-Control-Allow-Headers", "Content-type"); filterChain.dofilter (solicitud, respuesta); }}Configurar filtro en web.xml:
<filter> <filter-name> CrossDomaInFilter </filter-name> <filter-class> com.javadoop.filters.crossdomainfilter </filter-class> </filter> <filter-mapping> <filter-name> CrossDomaInfilter </filter-name> <url-pattern>/*</ url-Pattern> </filter-mapping>-mapping>-mapping>-mapping>
Hay muchos proyectos que usan Shiro, y también puede configurar los filtros Shiro, por lo que no los presentaré aquí.
Tenga en cuenta que estoy hablando de configuraciones muy generales, que se pueden configurar en tales configuraciones generales para la mayoría de los proyectos. Los lectores deben saber cómo hacer coincidir las configuraciones como "*" en el artículo.
Si el lector descubre que el navegador solicita que el símbolo '*' no se puede usar, entonces el lector puede obtener el referente (request.getheader ("referente") en el encabezado de solicitud de acuerdo con el objeto de solicitud en el filtro anterior y luego establecer dinámicamente "access-ehontrol-e-ehorigin":::
String referer = request.getheader ("referente"); if (stringUtils.isnotblank (referente)) {url url = new url (referente); String origin = url.getProtocol () + ": //" + url.gethost (); Respuesta.AddHeader ("Access-Control-Allow-Origin", Origin);} else {Response.AddHeader ("Access-Control-Allow-Origin", "*");}Escritura no jQuery frontal
Los días en que comes jQuery con un truco se han ido por completo. Aquí hablaré sobre cómo resolver el problema del dominio cruzado si no usa jQuery.
Presentemos un JS nativo:
function createCorsRequest (método, url) {var xhr = new xmlhttprequest (); if ("WithCredentials" en xhr) {// Si hay el atributo WithCredentials, definitivamente es un objeto xmlhttprequest2. Mire el tercer parámetro xhr.open (método, url, true); } else if (typeof xdomainRequest! = "undefined") {// Este objeto es utilizado por IE para solicitar a través de dominios xhr = new XdomainRequest (); xhr.open (método, url); } else {// Si es así, desafortunadamente, el navegador no admite Cors xhr = null; } return xhr;} var xhr = createCorsRequest ('get', url); if (! xhr) {arrojar un nuevo error ('Cors no admitido');}Entre ellos, Chrome, Firefox, Opera y Safari, estos navegadores "amigables para el programador" usan objetos XMLHTTPREQUEST2. IE usa XdomainRequest.
Resumir
Lo anterior se trata de resolver rápidamente los problemas de solicitud de dominio cruzado: JSONP y CORS. Espero que sea útil para todos. Los amigos interesados pueden continuar referiéndose a otros temas relacionados en este sitio. Si hay alguna deficiencia, deje un mensaje para señalarlo.