introducción
El dominio cruzado es una pregunta que a menudo hago en entrevistas diarias. Este término aparece con frecuencia en el mundo front-end. La razón principal es que se debe a restricciones de seguridad (estrategia del mismo origen, es decir, JavaScript o Cookies solo pueden acceder al contenido bajo el mismo dominio). Debido a que inevitablemente necesitamos realizar operaciones de dominio cruzado durante el desarrollo diario de proyectos, las capacidades de dominio cruzado también son una de las habilidades básicas de los ingenieros front-end.
Como la mayoría de las soluciones de dominio cruzado, JSONP también es mi elección, pero un día el PM necesita cambiar, y se debe cambiar una determinada función para admitir Post, porque la cantidad de datos transmitidos es relativamente grande y la forma GET no se puede manejar. Así que he estado luchando con los corre más conocidos (intercambio de recursos de origen cruzado), y el artículo aquí es una breve notación y resumen durante el período de lucha.
• ¿Qué puede hacer Cors?
El uso normal de AJAX requiere una consideración normal de los problemas de dominio cruzado, por lo que los grandes programadores también han luchado con soluciones para problemas de dominio cruzado, como JSONP, Flash, Ifame, XHR2, etc.
• El principio de CORS:
CORS define un mecanismo para el acceso al dominio cruzado, lo que permite a Ajax lograr el acceso al dominio cruzado. CORS permite que las aplicaciones de red en un dominio envíen solicitudes de AJAX de dominio cruzado a otro dominio. Implementar esta función es muy simple, solo envíe un encabezado de respuesta del servidor.
Vamos al tema a continuación para obtener más detalles de la siguiente manera:
La solicitud HTTP de sitio cruzado se refiere a una solicitud HTTP en la que el dominio donde el recurso inicia la solicitud es diferente del dominio donde el recurso inicia la solicitud.
Por ejemplo, si introdujo los recursos de la estación B (www.b.com/images/1.jpg) a través de la etiqueta <img> en el sitio web A (www.a.com), entonces la estación A iniciará una solicitud de sitio cruzado a la estación B.
Se permiten solicitudes de sitios cruzados para este tipo de recurso de imagen, y las solicitudes de sitios cruzados similares incluyen archivos CSS, archivos JavaScript, etc.
Sin embargo, si se inicia una solicitud HTTP en un script, el navegador lo restringirá por razones de seguridad. Por ejemplo, para iniciar solicitudes HTTP utilizando el objeto xmlhttprequest, debe cumplir con la política del mismo origen.
La llamada "política del mismo origen" significa que una aplicación web solo puede usar el objeto XMLHTTPRequest para iniciar solicitudes HTTP al dominio donde está el origen. Esta fuente de solicitud y objeto de solicitud deben estar en el mismo dominio.
Por ejemplo, http://www.a.com, el protocolo de este sitio web es http, el nombre de dominio es www.a.com y el puerto predeterminado es 80. Entonces, la siguiente es su situación homóloga:
• http: //www.a.com/index.html homogén
• https: //www.a.com/a.html diferentes fuentes (diferentes protocolos)
• http: //service.a.com/testservice/test diferentes fuentes (los nombres de dominio son diferentes)
• http: //www.b.com/index.html diferentes fuentes (los nombres de dominio son diferentes)
• http: //www.a.com: 8080/index.html diferentes fuentes (diferentes puertos)
Para desarrollar aplicaciones web más potentes y más ricas, las solicitudes de dominio cruzado son muy comunes. Entonces, ¿cómo se realiza solicitudes de dominio cruzado sin renunciar a la seguridad?
W3C recomienda un nuevo mecanismo, a saber, el intercambio de recursos de origen cruzado (CORS).
El intercambio de recursos de origen cruzado (CORS) garantiza la seguridad de las solicitudes a través de la declaración colaborativa de Client + Server. El servidor agregará una serie de parámetros de solicitud HTTP (como Origin de Access-Control-Allow-Origin, etc.) al encabezado de solicitud HTTP para limitar qué solicitudes de dominio y qué tipos de solicitudes son aceptables. El cliente debe declarar su propia fuente (Orgin) al iniciar una solicitud, de lo contrario, el servidor no la procesará. Si el cliente no declara, la solicitud incluso será interceptada directamente por el navegador y no puede llegar al servidor. Después de recibir la solicitud HTTP, el servidor comparará los dominios, y solo se procesarán las solicitudes del mismo dominio.
Un ejemplo de uso de CORS para implementar solicitudes de dominio cruzado:
Cliente:
function getHello () {var xhr = new xmlhttprequest (); xhr.open ("post", "http://b.example.com/test.ashx", true); xhr.setRequestheader ("content-type", "aplicación/xwww-form-urlenced"); // Declarar la fuente de solicitud XHR.SetRequestHeader ("Origin", "http://a.example.com"); xhr.onreadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {var espongaxt = xhr.Responsetext; console.info (ResponseText);}} xhr.send ();}Servidor:
Prueba de clase pública: ihttphandler {public void ProcessRequest (httpcontext context) {context.response.contentType = "text/sencillo"; // declarar las solicitudes de todos los dominios context.response.addheader ("access-Control-alquil-origin", "*"); context.Response.write ("hello hello"); Isreusable {get {return false;}}}Habilitar el acceso al dominio cruzado en la API web
CORS es una declaración de colaboración del lado del servidor y del cliente para garantizar la seguridad de las solicitudes. Por lo tanto, si necesita habilitar CORS en la API web, también debe configurarlo en consecuencia. Afortunadamente, el equipo ASP.NET de Microsoft proporciona una solución oficial habilitada para el dominio cruzado, que solo debe agregarse en Nuget.
Luego use la siguiente configuración en APP_Start/Webapiconfig.cs para lograr el acceso al dominio cruzado:
Public Static Class Webapiconfig {registro de voides estáticos públicos (configuración httpconfiguration) {// Configuración y servicios de la API web // Configurar la API web para usar solo la autenticación de token de portador. config.SupessDefaUsThoStauthentication (); config.filters.add (new HostauthenticationFilter (oauthdefaults.authenticationType)); // rutando de api web con configuración. "API/{Controller}/{id}", defaults: new {id = RouteroMeter.optional}); // Permitir el acceso a la API web de la Web EnableCrossSeSiteSequests (config); config.Formatters.jsonFormatter.PortedMediatyPes.add (new MediatypeHeaderDervalue ("Text/Html");});});});});}); EnableCrossSeTerequests (httpconfiguration config) {var cors = new EnableCorsAttribute (Origins: "*", encabezados: "*", métodos: "*"); config.enablecors (cors);}}Dado que los navegadores por debajo de IE10 no admiten CORS, CORS no es una solución de dominio cruzado en China en China en la actualidad. Sin embargo, con el lanzamiento de Windows 10 y la disminución gradual de IE, puede ser previsible que CORS se convierta en una solución estándar de dominio cruzado en el futuro cercano.
Lo anterior es la solución JS Cross Dominio introducida por el editor para usted. ¡Espero que te sea útil!