JS 跨域问题怎么解决 JSONP document.doma
2021-01-31 本文已影响0人
vivianXIa
由于浏览器的同源策略， 协议，端口，域名，三者任何一种不同就会产生跨域问题；
- Ajax不允许请求非同源的资源
- <script> <img>的src不会受到同源的限制 get方式
- json是一种数据格式，jsonp是一种数据传输格式，jsonp就是利用上述的第二点进行请求的
解决方案1：
-
jsonp跨域
jsonp发起流程
1:实例代码
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age：" + data.age + " name：" + data.name + " sex："+data.sex);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://local.sns.jutouit.com/test.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
php后端代码
<?php
$data = array(
'age' => 24,
'name' => '小华',
'sex' => '女'
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;
意思同上一步是一样的，等价于 jsonhandle({key:value}); 也就是方法的定义
2、jQuery 提供了方便使用 JSONP 的方式，虽然类似 ajax 的请求，但是本质是不一样的，且只能使用 get 请求，代码如下：
<html>
<head>
<title>GoJSONP</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://local.sns.jutouit.com/test.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数(参数值)
success : function(data) {
alert("age：" + data.age + " name：" + data.name + " sex："+data.sex);
}
});
});
</script>
</body>
</html>
3、jsonp与ajax的区别
- 原理不同 jsonp是同步的 ajax是异步的
- jsonp值支持get 而ajax支持各种
- ajax有同源检测 jsonp没有同源检查
- ajax是官方推出的 jsonp是民间的
/* 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：*/
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest(); //IE7，FireFox,Chrome,OPera,Safari
}else{
xmlhttp = new ActiveXobject('Microsoft.xmlHTTP'); // IE6，IE5
}
/* 属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面
onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：*/
// 根据 readyState 值不同，代表响应状态 的进程
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==0){
alert(0)
}
else if (xmlhttp.readyState==1){
alert(1)
}
else if (xmlhttp.readyState==2){
alert(2)
}
else if (xmlhttp.readyState==3){
alert(3)
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(4)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','text.txt',true);
xmlhttp.send();
}
解决方案2
document.domain + iframe跨域
前提主域名要一致 端口要一致，简单的说就是在html页面的script里边加入document.domain = 一级域名
news.baidu.com下的news.html页面：
<script>
document.domain = 'baidu.com';
var ifr = document.createElement('iframe');
ifr.src = 'map.baidu.com/map.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 这里可以操作map.baidu.com下的map.html页面
var oUl = doc.getElementById('ul1');
alert(oUl.innerHTML);
ifr.onload = null;
};
</script>
map.baidu.com下的map.html页面：
<ul id="ul1">我是map.baidu.com中的ul</ul>
<script>
document.domain = 'baidu.com';
</script>
-
nginx代理跨域
-
nodejs中间件代理跨域
-
后端在头部信息里面设置安全域名
