js----jsonp跨域及原理

原理

jsonp的原理就是利用标签的src可绕过同源限制，跨域请求。img,script,这种标签如果有相应的src，那么便会发起一个htttp请求来请求相应的资源,如果有script标签对应的路径是一个js文件，那么在下载完毕这个js之后会马上执行。

前端原生代码：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务器端代码：

handleCallback({"status": true, "user": "admin"})

缺点

• 只能发送get请求。因为script只能发送get请求
• 需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callback(result)的形式。

script的src和img的src跨域的区别

img只能单向发送get请求，不可访问响应内容（只是展现），而script可对其进行解析。