JSONP跨域原理分析

背景

• 浏览器有同源策略，会导致跨域（协议，域名,端口不同）
• 但是script 的src ，img 的src 不受同源策略的影响
• 所以可以利用这个漏洞， 动态生成script，解决跨域
• jsonp只支持get请求，因为src href 原理其实就是发送了一个get请求

原理

• 动态生成script 利用src 指定一个跨域url

操作

前端代码，基于Jquery分析

$.ajax({
          type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

后端代码

总结：

1. 前端要把dateType设置成'jsonp'
2. 'jsonp' : 'callback' 这个词可以和后端协商改成一样的即可如都叫eee
3. 默认情况下jquery会随机生成一个函数名字：比如callback= jquery123
4. 后端要把数据放在函数名的调用里 jquery123({数据})

不受同源策略的一些示例：

• <script src/>
• <link href=""/>
• img
• video，audio
• 通过 <object>、 <embed> 和 <applet> 嵌入的插件。 (可以忽略)

注意： 现在已经不建议使用 <embed> 标签了，可以使用 <img>、<iframe>、<video>、<audio> 等标签代替。 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。 HTML5 中不支持 标签。请使用 object 元素 标签代替。 HTML 4.01 中不赞成使用 元素。 某些浏览器中依然存在对 标签的一些支持，但是需要额外的插件和安装过程才能起作用。