好的网站建站公司,门户网站栏目维护建设方案,实体店营销方案,有谁可以做网站寄生虫同源策略JSONP跨域同源策略 对于同源的定义#xff0c;MDN给出了这样的解释#xff1a;如果两个页面的协议#xff0c;端口#xff08;如果有指定#xff09;和主机都相同#xff0c;则两个页面具有相同的源。如何确定两个页面是否同源#xff0c;只要比较两个页面…同源策略JSONP跨域同源策略 对于同源的定义MDN给出了这样的解释如果两个页面的协议端口如果有指定和主机都相同则两个页面具有相同的源。如何确定两个页面是否同源只要比较两个页面的协议、域名和端口即可。假设有这样一个页面http://zhihu.com/main.html相对于它给出同源检测的示例同源策略是浏览器最核心也最基本的安全功能。保证用户信息的安全防止恶意的网站窃取数据。限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。协议、端口、域名只要有一个不相同就不符合同源策略就会出现跨域。最常见的就是AJAX请求数据。跨域的解决办法JSONPJSONP是如何产生的呢1.我们都知道使用AJAX直接请求普通文件存在跨域无权限访问的问题甭管你是什么只要你是跨域请求一律不准不可以的 2.但是我们知道HTML中的scriptimgiframe等标签不受同源策略的影响拥有跨域的能力。那我们是否能利用这个特性从其他域下获取数据呢 3.我们得出结论要想在web端就跨域访问其他域的数据就有一个办法那就是把数据装进 JS 格式的文件里这样客户端就能够调用了。 4.但是获取的数据是做为 JS 来执行。于是就有一个问题数据是 JSON 格式的数据直接作为 JS 运行的话我如何去得到这个数据来操作呢 5.于是我们想到是否可以提前在页面上声明一个函数通过接口传参的方式发送给后台在经过后台处理发送给前端所以JSONP 需要对应接口的后端的配合才能实现。示例 script srchttp://api.jirengu.com/weather.php?callbackshowData/script这个请求到达后端后后端会去解析callback这个参数获取到字符串showData在发送数据做如下处理之前后端返回数据 {city: hangzhou, weather: 晴天} 现在后端返回数据 showData({city: hangzhou, weather: 晴天}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行这实际上就是调用showData这个函数同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数在函数内部处理参数即可。script
function showData(ret){
console.log(ret);
}
/script
script srchttp://api.jirengu.com/weather.php?callbackshowData/scriptJSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数函数名通过接口传参的方式传给后台后台解析到函数名后在原始数据上「包裹」这个函数名发送给前端。换句话说JSONP 需要对应接口的后端的配合才能实现。具体实现 :server.js代码 index.html代码 打开Git Bash进入server.js所在文件夹输入 node server.js 浏览器打开 http://localhost:8080/index.html于是我们得出JSONP的原理 JSONP本质上是利用 scriptimgiframe等标签不受同源策略限制可以从不同域加载并执行资源的特性来实现数据跨域传输。 JSONP由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数而数据就是传入回调函数中的JSON数据。JSONP的想法就是与服务端约定好一个回调函数名服务端接收到请求后将返回一段 JS代码在这段JS代码中调用了约定好的回调函数并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后就会执行这个回调函数这时数据已经成功传输到客户端了。
