solución problema común JSONP entre dominios

debido

Hablando hoy entre la fuente ... para servir el té, las empresas entrevistador hacerle al entrevistador cómo solucionar el multidominio frontal oído. Mi corazón en silencio pensó por un momento, papá Pa instante se acercó con algunas palabras clave, iframe, CORS, la política del mismo origen, JSONP ... Entonces pensé, aunque es preguntas de la entrevista muy comunes, pero estoy en el proceso de desarrollo en realidad no han utilizado de esta manera ... incluso principios JSONP también dijeron que mal. sudor frío,?, y encontrar rápidamente información relevante.

Política del mismo origen

Para la política del mismo origen, aquí voy a no ser gravosos a describir, en términos simples, si los tres siguientes: el mismo protocolo , el mismo nombre de dominio , el mismo puerto cada vez que hay un no cumple, el navegador va a No 'Access-Control-Allow-Origin' header is present on the requested resourcelanzar su cara.

soluciones

Se puede decir inevitablemente problemas entre dominios en términos de front-end, pero la política del mismo origen, después de todo, juega un papel importante en la protección de las redes y la información de seguridad. Imagínese si no hay una política del mismo origen, otras páginas pueden fácilmente robar su cookie, y si su galleta en su información personal ... no es horrible, pero habiendo dicho que las cuestiones de política origen de varios dominios también son llevados dolor de cabeza, pero afortunadamente ahora hay muchas maneras de resolver.

1. CORS estrategia de distribución de los recursos entre dominios (

2. JSONP

3. window.name

4. la document.domain (disponible bajo las mismas circunstancias el dominio principal)

5. postMessage (h5 recién introducida)

6. WebSocket (h5 de reciente introducción, a partir de las mismas restricciones de política origen, por lo que es una cosa buena ... h5?)

7. ...

Debido al espacio limitado (bueno ... de hecho, no puedo escribir tanto), aquí otras maneras de resolver no uno por uno Xiangjie.

Es el Señor viene, JSONP

JSONPEs JSON with Paddingcorto, es una forma más común de resolver acceso a varios dominios. Echemos un vistazo a algunos ejemplos de código:

ajax({//此ajax方法是封装了XMLHttpRequest对象实现，具体代码与本文无关就不贴了
  method : 'get',
  url : 'http://127.0.0.1:8787',
  data : {
  'name' : '小明',//此ajax方法会自动将数据以get方式提交
  'age' : 22
  },
  success : function (message) {
    alert(message);
  },
  async : true
})

El código anterior es muy simple, los iniciados navegador asíncrona peticiones Ajax, veamos el código del servidor:

app.get('*', function(req, res) {//这里只截取了关键代码
  res.send("测试数据");
});

Claro, fácil de entender ~ así, ¿qué sucedió?

Como era de esperar, el navegador vierten por toda la cara ...
batallas ex situ! JSONP estalló apariencias -

function showJsonp(obj){
  console.log(obj.message);
}
var url = 'http://127.0.0.1:8787/?func=showJsonp'
var script = document.createElement('script');
script.setAttribute('src',url);
script.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);

Código detrás - de nuevo

app.get('*', function(req, res) {
  let callback = req.query.func;
  let content = callback+"({'message':'测试数据2'})";
  res.send(content);
});

resultados:

Genial! Won! ! completa Gana!
Es el momento de analizar la ola de tácticas - por lo general cuando se escribe código, muchas personas no pueden prestar atención, src, etc., para la escritura navegador, etiquetas iframe y otros atributos, no son las restricciones de la política del mismo origen. Y jsonp a buen uso en este momento - cuando se inició la solicitud, url seguido por el nombre funcdel parámetro, y este parámetro es necesario después de que el nombre de la función de devolución de llamada utilizado.
Nos dinámica de inserción scriptetiquetas forma, utilizando el atributo src de la etiqueta script para iniciar la solicitud, el navegador no llegaremos a la cuestión política de mismo origen ... y detrás del escenario construido a petición de los datos a largo aserrado ella?

showJsonp({'message':'测试数据2'})

Dime! Después de que el código se inserta en la etiqueta script, ¿qué pasará? !
Por supuesto, la implementación de la función ya definida ah ~ showJsonp
bingo, la solución perfecta para el problema de dominios cruzados ~ ~

finalmente

compatibilidad manera jsonp es muy buena, incluso los antiguos navegador, también se puede resolver el problema con la forma en jsonp entre dominios, pero también puede ser limitado, sólo se puede utilizar la forma get para iniciar una solicitud, y para las páginas js entre diferentes dominios llamar a los demás no puede hacer nada.

Este artículo se reproduce en: mono 2048➦ https://www.mk2048.com/blog/blog.php?id=hhibk12iakj