跨域问题与解决方案
来源:互联网 发布:淘宝客 部分退款 编辑:程序博客网 时间:2024/06/10 18:59
说到跨域,比跨不过去的地方:同源策略(引起跨域问题的策略)
所以,文章开头先来简单的介绍一下同源策略
什么是同源策略?
判断同源的三个要素:
1. 相同的协议
2. 相同的域名
存在的意义:
假设没有同源策略,那么我在A网站下的cookie就可以被任何一个网站拿到;那么这个网站的所有者,就可以使用我的cookie(也就是我的身份)在A网站下进行操作。
同源策略可以算是 web 前端安全的基石,如果缺少同源策略,浏览器也就没有了安全性可言
跨域的方式和原理
1. JSONP
原理:
JS文件不受通院策略的影响。(不仅如此,凡是拥有”src”这个属性的标签都拥有跨域的能力,不受同源策略影响,比如、
script标签、img标签、iframe标签)
方法方式:
a. 通过请求一个src请求相应的路径带上一个callBack=callback参数,让后台返回的时候将动态的data填写在这个callBack参数当中,既callback(data),这样当数据过来的时候,我们就可以调用自己页面已经定义的一个callback函数对data进行处理了;
function createScript(where){ var script = document.createElement("script"); script.setAttribute("type" , "text/javascript"); srcipt.setAttribute("src" , where); document.body.appendChild(script);}//调用的时候createScript("www.xxx.xxx/xxx.xxx?callBack=callback");function callback(data){//doSomething Here处理我们的data的函数}
b. jQuery早就对这些做好了接口,帮我们处理了,所以在实际应用当中只要这样调用即可:
$.ajax({ url: 'www.xxx.xxx/xxxx.xxx', //不同的域 type: 'GET', // jsonp模式只有GET是合法的 dataType: 'jsonp', // 数据类型 jsonp: 'callback', // 指定回调函数名,与服务器端接收的一致 success: function(data) { //doSomething Here处理我们的data }})
2. 反向代理与Nginx
原理:跨域的问题存在于外部请求与不同的域名下,不痛的服务器之间交流,这个时候我们统一设置一个代理服务器,来处理来自外部的请求,再通过代理服务器去请求相应的服务器返回结果之后再返回给用户,这样对于外部来说我们就是一个统一的接口,而同源策略在服务器之间的交流不会有影响,其中之一就Nginx反向代理
方法方式:
3. HTML5之postMessage
原理: window.postMessage() 方法被调用时,会在所有页面脚本执行完毕之后
方法方式:
a. 发送方语法:
otherWindow.postMessage(message, targetOrigin, [transfer]);
message:你要传送的信息,将被结构化克隆算法序列化
targetOrigin:消息的发送地点,可以是”*“也可以是一个URI,在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;
transfer: 是一串和message 同时传递的 Transferable 对象(暂时不知道啥意思,以后来补充)
b. 接收方:通过监听message事件,来触发接收message的回调函数;
window.addEventListener("message", receiveMessage, false);function receiveMessage(event){ // 对于谷歌来说, origin属性在event.originalEvent里面 var origin = event.origin || event.originalEvent.origin; if (origin !== "http://example.com:8080") return; // do Sometings Here}
event下有用的属性:
event.data: 从其他 window 中传递过来的消息;
event.origin: 调用 postMessage时消息发送方窗口的 origin(”http:example.com:8080”);
event.source: 对发送消息的窗口对象的引用;可以使用此来在具有不同origin的两个窗口之间建立双向通信
需要注意的是,大家设置发送和监听事件的时候一定要设置origin,避免自己的信息被别人监听到,避免监听到奇怪的其他地方的信息;
4. 设置CROS(XHR2)
原理:新版本提供的新功能,更深入的原理我。。。也不知道
方法方式:
先来看看xhr的步骤:
1. 先var xhr = new XMLHttpRequest(); new一个xhr对象;
2. 监听一下onreadystatechange事件;
3. open一下xhr;
4. 最后send出去,等回调;
其实这个方法主要是,服务器去设置,我们的xhr步骤基本一样的;
参考:
1.MDN:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
2.阮一峰博客:
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
- 跨域问题与解决方案
- 跨域问题及其解决方案
- Ajax跨域与解决方案
- 上周问题总结与解决方案
- 产品与解决方案的问题。
- SampleGrabber开发问题与解决方案
- GEF问题与解决方案收集
- 项目中的问题与解决方案
- SampleGrabber开发问题与解决方案
- 哲学家就餐问题与解决方案
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
- Hololens与Unity问题与解决方案
- 跨域问题的初级解决方案
- 关于跨域问题的解决方案
- AJAX的跨域问题CORS解决方案
- [转]WEB跨域问题及解决方案
- PHP Ajax 跨域问题最佳解决方案
- PHP Ajax 跨域问题最佳解决方案
- Atom下Markdown的快捷使用技巧
- 数字图像处理(二)
- convert-sorted-list-to-binary-search-tree
- OpenGL+Qt界面(四) 纹理贴图
- Python--day5 数据类型1
- 跨域问题与解决方案
- 浏览器渲染过程、回流重绘
- JS深拷贝与浅拷贝及实现
- [网络搜集]自己安装ubuntu后安装某些软件时遇到的问题不断整理中
- 浏览器缓存机制、http缓存头
- Oracle数据库学习
- 160个练手CrackMe-009
- https、secure socket layer、对称密钥与不对称密钥(占坑)
- 关于UGUI中Button,InputField等不响应的解决方法