JS跨域问题常见的五种解决⽅式
JS 跨域问题常见的五种解决⽅式
⼀、什么是跨域？
要理解跨域问题，就先理解好概念。跨域问题是由于javascript语⾔安全限制中的同源策略造成的.
简单来说，同源策略是指⼀段脚本只能读取来⾃同⼀来源的窗⼝和⽂档的属性，这⾥的同⼀来源指的是主机名、协议和端⼝号的组合.
URL                            说明是否允许通信
www.a/a.js
www.a/b.js        同⼀域名下允许
www.a/lab/a.js
www.a/script/b.js  同⼀域名下不同⽂件夹允许
www.a:8000/a.js
www.a/b.js        同⼀域名，不同端⼝不允许
www.a/a.js
www.a/b.js        同⼀域名，不同协议不允许
www.a/a.js
70.32.92.74/b.js      域名和域名对应ip    不允许
www.a/a.js
script.a/b.js      主域相同，⼦域不同不允许
www.a/a.js
a/b.js            同⼀域名，不同⼆级域名（同上）不允许（cookie这种情况下也不允许访问）
wwwblogs/a.js
www.a/b.js        不同域名不允许
同源策略设计之初是为了安全，但也对正常的跨域开发造成了⼀定影响，不过还是有不同的解决办法的。
⼆、解决办法
跨域问题，更多的情况是出现在需要⽤ajax获取数据时，那么现在就先看个⾮跨域的栗⼦
（功能主要是从后台获取names列表，并展⽰出来）
前端部分：
<body>
<div id="box">
<ul>names:</ul>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
function addContents(data){
var box = ElementById('box'),
ul = ElementsByTagName('ul')[0],
fragment = ateDocumentFragment(),
li;
for(var i=0,j=data.length; i<j; i++){
li = ateElement('li');
if(data[i].hasOwnProperty('name')){
li.ateTextNode(data[i].name));                    fragment.appendChild(li);
}
}
ul.appendChild(fragment);
}
$.ajax({
url: './cross_domain.php',
//url: 'demoff.sinaapp/cross_domain.php',
type: 'GET',
dataType: 'json',
data: {},
success: function(data){
addContents(data);
},
error: function(xmlHttpRequest,textStatus,error){
console.log(xmlHttpRequest.status);
console.log(textStatus);
}
});
</script>
</body>
现在后端php是设在同域之下：
<?php
// 接收数据
// $jsoncallback = $_GET["jsoncallback"];
/
/ 构造数据
for($i=1; $i<=5; $i++){
$names[] = array("name" => "name" + $i);
}
// $data = $jsoncallback . "(" . json_encode($names) . ")";
$data = json_encode($names);
echo $data;
>
ok, 这样⼀来数据可以正常加载，形如：
好那就进⾏解决吧
  第⼀： 使⽤ 跨域资源共享（CORS）
phpjson格式化输出CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使⽤⾃定义的HTTP头部让浏览器与服务器进⾏沟通，从⽽决定请求或响应是应该成功还是失败。
使⽤⽅法也很简单，在php后端设置 Access-Control-Allow-Origin 头即可，如：
<?php
header("Access-Control-Allow-Origin: *");
//header("Access-Control-Allow-Origin: 我的域或ip");
// 接收数据
// $jsoncallback = $_GET["jsoncallback"];
// 构造数据
for($i=1; $i<=5; $i++){
$names[] = array("name" => "name" + $i);
}
// $data = $jsoncallback . "(" . json_encode($names) . ")";
$data = json_encode($names);
echo $data;
>
第⼆：使⽤jsonp
什么是jsonp？的定义是：JSONP（JSON with Padding）.
JSONP也叫填充式JSON，是应⽤JSON的⼀种新⽅法，只不过是被包含在函数调⽤中的JSON，例如：
callback({"name","name1"}); JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页⾯中调⽤的函数，⽽数据就是传⼊回调函数中的JSON数据。jsonp的原理是：
就是利⽤<script>标签没有跨域限制，来达到与第三⽅通讯的⽬的。
当需要通讯时，本站脚本创建⼀个<script>元素，地址指向第三⽅的API⽹址，并提供⼀个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三⽅产⽣的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调⽤callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数⾥处理所传⼊的数据。
（我们知道 <link href <img src <script src 请求的数据都不受域的限制）
jsonp的使⽤⽅法：
客户端指明使⽤jsonp的⽅式，服务器接受参数，并外包裹要返回的数据，再⼀并返回。jquery的ajax简单描述：
前端指明data:jsonp , 在标明⾃定义的参数名 jsonp:jsoncallback
<body>
<div id="box">
<ul>names:</ul>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
function addContents(data){
var box = ElementById('box'),
ul = ElementsByTagName('ul')[0],
fragment = ateDocumentFragment(),
li;
for(var i=0,j=data.length; i<j; i++){
li = ateElement('li');
if(data[i].hasOwnProperty('name')){
li.ateTextNode(data[i].name));
fragment.appendChild(li);
}
}
ul.appendChild(fragment);
}
$.ajax({
/
/url: './cross_domain.php',
url: 'demoff.sinaapp/cross_domain.php',
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: {},
success: function(data){
addContents(data);
},
error: function(xmlHttpRequest,textStatus,error){
console.log(xmlHttpRequest.status);
console.log(textStatus);
}
});
</script>
</body>
后端服务器部分要做的就是，拿到参数，再包裹
<?php
//header("Access-Control-Allow-Origin: *");
//header("Access-Control-Allow-Origin: 我的域或ip");
// 接收数据
$jsoncallback = $_GET["jsoncallback"];
/
/ 构造数据
for($i=1; $i<=5; $i++){
$names[] = array("name" => "name" + $i);
}
$data = $jsoncallback . "(" . json_encode($names) . ")";
//$data = json_encode($names);
echo $data;
>
结果显⽰：
你可能会奇怪这⼀⼤串是什么，这其实是jq⾃动⽣成的⼀个函数名（也就是那个jsoncallback参数的值）
其实还有⼀种很常见的⽅式就是使⽤ $.getJson获取，直接给出⼀个⽹址
把$.ajax部分替换成$.getJson部分
$.getJSON('demoff.sinaapp/cross_domain.php?jsoncallback=?',function(data){
addContents(data);
});
jquery会⾃动⽣成⼀个全局函数来替换callback=?中的问号，之后获取到数据后⼜会⾃动销毁，实际上就是起⼀个临时代理函数的作
⽤。$.getJSON⽅法会⾃动判断是否跨域，不跨域的话，就调⽤普通的ajax⽅法；跨域的话，则会以异步加载js⽂件的形式来调⽤jsonp的回调函数。
我也可以指定那个值，因为我们⽬的是要运⾏addContents函数，那就可以直接指定为它。不过这时就不能使⽤$.getJson版的匿名函数了
直接再加个<script> 看看结果，数据返回后相应的函数就被调⽤执⾏。
<script type="text/javascript" src="demoff.sinaapp/cross_domain.php?jsoncallback=addContents"></script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。