前端开发环境处理跨域的几种方式及原理

前端本地开发环境搭建|前端开发工具可以解决跨域吗?|html前端开发跨域接口调试

1.什么是跨域

2.跨域的情况

3.跨域的方法
jsonp跨域
原理:创建<script>标签,利用src属性跨域(src属性可以跨域),同样<img>也可以处理跨域
举个栗子:
test.html —–> http://a.haha.com/test.html
ajaxData —–> http://b.haha.com/list
test.html访问ajaxData需要跨域
javascript 代码

<script src=”http://b.haha.com/list?callback=dosomething”></script>
<script type=”text/javascript”>
    function dosomething(jsondata) {
        // 处理获取的json数据
    }
</script>

服务端的代码
php代码

<?php
    $callback = $_GET[‘callback’]; //得到回调函数名
    $data = array(1,2,3); //返回的数据
    echo $callback.'(‘.json_encode($data).’)’;
?>

局限性:<1> 需要服务端配合做处理
<2> jsonp只支持“get”请求,不支持“post”请求
document.domain来跨越子域
原理:设置相同的主域
举个栗子:
有一个页面,它的地址是 http://a.haha.com/test.html , 在这个页面里面有一个iframe,它的src是 http://b.haha.com/test.html , 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的
html 代码

<iframe src=”http://b.haha.com/test.html” onload=”test()” id=”iframe”></iframe>
<script type=”text/javascript”>
    document.domain = “haha.com”;
    function test() {
        // 获取iframe中的数据
        var cont = document.getElementById(‘iframe’).contentWindow;
    }
</script>

注意: <1> document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。
<2> 修改document.domain的方法只适用于不同子域的框架间的交互,对ajax访问的不适用。
隐藏iframe做代理跨域

原理:让这个隐藏的iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的,然后就是通过修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。

html 代码

<iframe src=”http://b.haha.com/ajaxProxy.html” onload=”test()” id=”iframe” style=”display:none”></iframe>
<script>
    // 设置相同的主域
    document.domain = ‘haha.com’;
    iframe = document.getElementById(‘iframe’);
    iframe.addEventListener(‘load’, function (e) {
        // 1.发送ajax请求数据
        // 2.获取iframe中的数据
        var cont = iframe.contentWindow;
        // 3.数据的处理
    })
</script>

在梳理一下第3种
<1> test.html中设置一个隐藏的iframe,其src为http://b.haha.com/ajaxProxy.html,与ajaxData处于相同域,在iframe中访问ajaxData获取返回的数据
<2> 再利用第二种方法去获取iframe中的数据进行处理

CORS(跨域资源共享)跨域
基本思想:使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应的成功还是失败
实现关键:服务器实现CORS接口,设置Access-Control-Allow-Origin
基本流程:
1.浏览器发送跨域ajax请求,会自动在头部信息中添加一个“Origin”字段,用来说明本次请求来自哪个源,服务器根据这个值确定是否同意这次请求。
Origin:http://b.haha.com
2.服务器发现origin指定的域名在许可的范围内,服务器返回的响应头内会添加一个Access-Control-Allow-Origin 表示接受该域名的请求。
Access-Control-Allow-Origin:http://b.haha.com
更多的了解可以参考阮老师的文章 跨域资源共享 CORS 详解

前端开发中,如何解决跨域问题?|前端本地开发环境搭建|vue前端后端分离开发环境

» 本文来自:前端开发者 » 《前端开发环境处理跨域的几种方式及原理》
» 本文链接地址:https://www.rokub.com/4313.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!