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

前端本地开发环境搭建|前端开发工具可以解决跨域吗？|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 代码

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 代码

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 代码

// 设置相同的主域

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前端后端分离开发环境

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

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发