每个接触前端的人都会遇到前端经典跨域问题,下面介绍几种我所知道的跨解决方法
1.首先什么是跨域?
即为不同域名之间相互访问
2.那什么是不同域呢?
只要协议名,域名,端口号,任一不同则为不同域
解决方法:
1.Jsonp:利用<script>标签的src属性实现
script中src可以跨域加载别的域中文件
实现方法:
创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数
例:
//a.com
<script src="http://www.b.com/test.php?name=lisi&callback=aaa"></script>
在b.com中的test.php中可以接收传递过来的参数name还有callback,然后执行:
b.com中执行回调函数的调用echo 'callback(要回传给a.com的数据)'
缺点:只能进行get请求,不支持post请求
2.服务器端代理:
服务器端是没有跨域问题的
3.CORS(跨域资源共享)
基本思想:使用自定义的http 请求头让浏览器和服务器进行沟通
将XHR对象的URL从相对路径变为别的域下的绝对路径
要使服务器端对CORS进行支持,需要设置Access-Control-Allow-Origin
如果浏览器检测到相应设置,允许Ajax进行跨域访问
4.document.domain
只适用于不同子域的框架间交互
实现方法:将两个页面的document.domain设置为相同域名
document.domain只能设置自身或更高级的父域,且主域必须相同
document.domain=“”
5.window.name+iframe
window.name特征:在一个窗口声明周期内,窗口载入的所有文件都是共享一个window.name的
每个页面都有读写权利
主要实现需要三个页面
a.com/app.html
a.com/proxy.html(代理文件)
b.com/data.html
首先在a.com/app.html 创建一个iframe 使其src指向数据页面,数据页面会把数据附加到iframe的window.name上
然后在应用页面监听iframe.onload事件,在事件中设置iframe的src属性指向本地域代理文件
获取数据后销毁iframe