JavaScript/js跨域的4种解决方案

在实际的开发中你也许会遇到js的跨域问题，下面列出了一个可以通信和不能通信的情况

情况	url	结果
同一域名下	https://www.phpnote.cc/a.js	可以
同一域名下不同文件夹	https://www.phpnote.cc/a.js https://www.phpnote.cc/js/b.js	可以
同一域名，不同端口	http://www.phpnote.cc:8080/a.js https://www.phpnote.cc/b.js	不可以
同一域名，不同协议	http://www.phpnote.cc/a.js https://www.phpnote.cc/b.js	不可以
域名和域名对应ip	https://www.phpnote.cc/a.js http://192.168.0.2/b.js	不可以
主域相同，子域不同	https://www.phpnote.cc/a.js http://js.phpnote.cc/b.js	不可以
同一域名，不同二级域名（同上）	https://www.phpnote.cc/a.js http://phpnote.cc/b.js	不可以
不同域名	http://www.phpnote.cc/a.js https://blog.kydbk.com/b.js	不可以

上面表格中不能通信的情况，实现项目中还是要通行怎么处理，那么就需要跨域
下面总结了4种ajax跨域的解决方法,实例都是使用jquery来操作的,当前域名https://www.phpnote.cc,调用域名https://js.phpnote.cc，根据上面的表格，必须跨域才能访问

一、传统ajax方法

//js
$("#ajax").click(function(){  
     $.ajax({  
         type: "POST",  
         url: "http://js.phpnote.cc/a.php",  
         data: 'name=ajax',  
         dataType:"json",  
         success: function(data){  
            alert(data.name);  
         }  
     });  
 });

//js

$("#ajax").click(function(){

$.ajax({

type: "POST",

url: "http://js.phpnote.cc/a.php",

data: 'name=ajax',

dataType:"json",

success: function(data){

alert(data.name);

}

});

//a.php
header("Access-Control-Allow-Origin:http://www.phpnote.cc");    //允许www.phpnote.cc提交访问  
//header("Access-Control-Allow-Origin:*");    //允许任何访问  
echo json_encode($_POST);

//a.php

header("Access-Control-Allow-Origin:http://www.phpnote.cc"); //允许www.phpnote.cc提交访问

//header("Access-Control-Allow-Origin:*"); //允许任何访问

echo json_encode($_POST);

二、$.getJSON

$.getJSON('http://js.phpnote.cc/a.php?name=getjson&callback=?', function(data){  //没有回调函数，直接处理  
    alert(data.name);    
});

$.getJSON('http://js.phpnote.cc/a.php?name=getjson&callback=?', function(data){ //没有回调函数，直接处理

alert(data.name);

});

三、$.getScript

$.getScript('http://js.phpnote.cc/a.php?name=getscript&callback=getdata');  //回调函数根jsonp一样

1	$.getScript('http://js.phpnote.cc/a.php?name=getscript&callback=getdata'); //回调函数根jsonp一样

四、ajax jsonp

//js
$("#jsonp").click(function(){  
     $.ajax({  
         url: 'http://js.phpnote.cc/a.php',  
         data: {name: 'jsonp'},  
         dataType: 'jsonp',  
         jsonp: 'callback',      //为服务端准备的参数  
         jsonpCallback: 'getdata',   //回调函数  
         success: function(){  
            alert("success");  
         }  
     });  
 });  
  
function getdata(data){  
 $('#Result').text(data.name);  
}

//js

$("#jsonp").click(function(){

$.ajax({

url: 'http://js.phpnote.cc/a.php',

data: {name: 'jsonp'},

dataType: 'jsonp',

jsonp: 'callback', //为服务端准备的参数

jsonpCallback: 'getdata', //回调函数

success: function(){

alert("success");

}

});

function getdata(data){

$('#Result').text(data.name);

}

//a.php
<?php  
 if(isset($_GET['name']) && isset($_GET['callback']))   //callback根js端要对应，不然会报错的  
 {  
 echo $_GET['callback']. '(' . json_encode($_GET) . ');';   //格式固定的，为什么这样，不清楚  
 }  
?>

//a.php

<?php

if(isset($_GET['name']) && isset($_GET['callback'])) //callback根js端要对应，不然会报错的

{

echo $_GET['callback']. '(' . json_encode($_GET) . ');'; //格式固定的，为什么这样，不清楚

}

更多js跨域解决方法等整理…

转载请注明：PHP笔记 » JavaScript/js跨域的4种解决方案