Ahora discutamos los temas relacionados de los datos de solicitud de dominio cruzado del navegador. Puede que no sea muy estándar decir que esto se debe a que rechazar datos de solicitud de dominio cruzado no es exclusivo del navegador. La razón por la cual el dominio cruzado no puede solicitar datos es porque los navegadores básicamente implementan una especificación de seguridad llamada "política del mismo origen". ¿Cuál es la especificación específica? Encontramos un perfil en MDN con la siguiente dirección:
Explicación de la política homóloga del navegador
En general, cuando la URL A y la URL B difieren en términos de protocolo, puerto y nombre de dominio, el navegador iniciará una política del mismo origen y rechazará las solicitudes de datos entre los servidores A y B.
Cuando se habla de la estrategia del mismo origen, el conocimiento que obtienes es superficial. Debes practicarlo tú mismo. ¿Cómo se refleja la estrategia del mismo origen? A continuación, demostraré paso a paso en combinación con el código.
1. Servidor A no puede solicitar servidor B
Como es de dominio cruzado, asumiré que tengo dos nombres de dominio, a saber, A y Localhost. Un medio que el editor aloja el nombre de dominio en Alibaba Cloud. Localhost, como su nombre indica, es mi máquina de desarrollo. Imaginamos un escenario en el que implementamos un archivo index.html en localhost, un simple servicio de backend boot de resorte en el servidor A, y proporcionamos una interfaz simple para exponerlo a la llamada de archivo index.html. Finalmente, el navegador solicita el archivo index.html de localhost y vea lo que indica el navegador.
index.html
<! Doctype html> <html> <fead> <title> Test Cross-Domain Access </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> </script> <script type type/"jaxcript"/"Jaxcript" "Jaxcript" "" "Jaxcript" "" "" "Jaxcript" "" "" "Jaxcript" "" "" "" Jaxcript "" "" "" "Jaxcript" "" "" "" "Jaxcripción" "" $ (documento) .Ready (function () {$ .AJAX ({type: "get", async: true, url: "http: //a/hello/map/getuser.json", // solicitar el tipo de interfaz en el servidor a: "json", éxito: function (datos) {// imprime los datos devueltos. </script> <h2> Hello World </h2> </body> </html>Solicite el archivo index.html en el navegador y se muestra de la siguiente manera:
Se puede encontrar que el navegador rechazó la solicitud, lo que nos lleva a no permitir solicitudes de dominio cruzado. Es muy incómodo. ¿Cómo resolverlo?
2. Use JSONP para resolver las solicitudes de dominio cruzado
Primero, hablemos sobre el principio. JSONP resuelve los problemas de dominio cruzado principalmente utiliza la dominio cruzada de la etiqueta <script>, es decir, la característica a la que se puede acceder a la dirección de enlace en el atributo SRC a través de dominios, porque a menudo establecemos el valor del atributo SRC en la dirección de CDN y la biblioteca JS relevante.
index.html
<! Doctype html> <html> <fead> <title> Test Cross-Domain Access </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> </script> <script type type/"jaxcript"/"Jaxcript" "Jaxcript" "" "Jaxcript" "" "" "Jaxcript" "" "" "Jaxcript" "" "" "" Jaxcript "" "" "" "Jaxcript" "" "" "" "Jaxcripción" "" $(document).ready(function() { $.ajax({ type : "get", async : true, jsonp : "callbackName",// Backend interface parameter name jsonpCallback : "callbackFunction", // Callback function name url : "http://A/hello/map/getUser.json", dataType : "jsonp", // The data format is jsonp éxito: function (data) {console.log ("éxito"); </script> <script type = "text/javaScript"> var CallbackFunction = function (data) {alert ('Los datos devueltos por la interfaz son:' + json.stringify (data)); }; </script> </body> </html>El código de interfaz en el servidor es:
/** * * La clase JSONBackController. * * Descripción: El controlador devuelve una cadena de datos JSON simples, y los datos JSON están compuestos por un objeto de usuario simple * * @author: huangjiawei * @since: 12 de junio de 2018 * @version: $ revisión $ $ date $ $ ortChangedby $ * */ @restcontroller @requestmapping (valor = "/map") public class JSonBackController {private static staticBy staticy static LoggerFactory.getLogger (jsonbackController.class); / *** Resolver datos de solicitud de dominio cruzado* @param Respuesta* @param llamado name de la función de devolución de llamada front-end* @return*/ @requestmapping (valor = "getUser.json") public void getUser (htttpServletResponse respuesta, @requestparam string CallbackNameName) {usuario usuario = "Huangjiawei", 22, 22); respuesta.setContentType ("Text/JavaScript"); Escritor escritor = nulo; intente {Writer = Response.getWriter (); Writer.Write (CallbackName + "("); Writer.Write (user.ToString ()); Writer.Write (");"); } catch (ioException e) {logger.error ("JSONP Respuesta escriba Falling! Data:" + user.ToString (), e); } finalmente {if (escritor! = null) {try {writer.close (); } Catch (ioException e) {logger.error ("Excepción de cierre de flujo de salida!", E); } escritor = nulo; }}}}El backend pasa en un nombre de función de devolución de llamada de parámetros, y luego devuelve una pieza de código JS al frontend. El formato de código JS es el siguiente:
callbackName + ( data ) + ;
El navegador solicita el archivo index.html en el servidor localhost, y el resultado es el siguiente:
El método anterior resuelve problemas de dominio cruzado a través de JQuery + JSONP. ¿No acabas de decir que puedes usar el atributo SRC de la etiqueta <script>? Cuatro.
index.html en el servidor localhost
<! DocType html> <html> <fead> <bitle> Test Cross-Domain Access </title> <meta charset = "utf-8"/> </fead> <body> <body <script src = "https://cdn.bootcss.com/jquery/3.1/jquery.min.js"> </script> <script tye callbackFunction = function (data) {alert ('Los datos devueltos por la interfaz son:' + json.stringify (data)); }; </script> <script type = "text/javaScript" src = "http: //a/hello/map/getuser.json? callbackName = callbackFunction"> </script> </body> </html>El efecto de visualización del navegador es el mismo que el anterior. Pero debe tenerse en cuenta aquí que SRC significa introducir un archivo JS. Dado que la interfaz lo llama directamente, y los datos devueltos por la interfaz son una pieza de código JS, se puede ejecutar. Además, el orden de la segunda etiqueta <Script> no se puede revertir, de lo contrario no se encontrará la función de servicio de devolución de llamada.
Dirección del código del proyecto: https://github.com/smallercoder/jsonpdemo
Finalmente, para resumir, hay muchas soluciones para soluciones de dominio cruzado, JSONP es solo una de ellas, y la situación específica debe analizarse en detalle. Espero que este artículo te sea útil. Gracias por leer. ¡Bienvenido a Github para comenzar, Momo! También espero que todos apoyen más a Wulin.com.