8种跨域解决方案
1.JSONP
同源策略 JavaScript只能访问与包含它的文档在同一域下的内容
跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。
在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。
对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
iFrame(3种)
关于frame先看看这个http://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html(iframe入门)
同域下数据可以直接通过 iframe.contentWindow.document.xxx parent.window.document.xxx来访问
2. iframe + hash
需要借助一个新的页面 这里叫做iframeC 和父页面同域
父->子 父改变子iframe的hash 那么子页面就得到父页面的数据了
子->父 再创建一个页面frameC嵌入到子页面 子hash传值到iframeC iframeC和父同域 (同域就好解决了)
3. 主域名相同 子域名不同 document.domain
两个页面都加上document.domain = '163.com'; 即可使用同域名iframe相互访问的方式
4. iframe + window.name
也需要借助新的页面 这里叫做empty a.com/empty.html
当a.com/index.html 需要b.com/data.html中的信息(data.html 中 window.xxx = xxxx)
用一个frame将data.html 嵌入到index
注意 这个window 是index.html所在的window 当然也是data.html中的window window是比document更高的一层 这样data中的信息就放到window中了
注意 这个window 是index.html所在的window 当然也是data.html中的window window是比document更高的一层 这样data中的信息就放到window中了
然后再将iframe通过 iframe.contentWindow.location 改为empty页面
这个empty的window和刚才的data的window是同一个 empty就得到数据了
既然empty和index在同一个域内 就很容易操作了
5.Access-Control-Allow-Origin
只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:
Access-Control-Allow-Origin: http://run.jsbin.io
Access-Control-Allow-Origin: http://run.jsbin.io
浏览器实际上是发送了请求 才知道服务端不允许跨域
6.反向代理
7.利用flash
8.postMessage (常用)
9.WebSocket
可以跨域
AJAX is HTTP. WebSockets has a HTTP friendly handshake, but WebSockets is not HTTP. WebSockets is a bi-directional protocol that is closer to raw sockets (intentionally so) than it is to HTTP.
WebSockets supports cross-domain. The initial handshake to setup the connection communicates origin policy information.
webSocket的安全问题