跨域問題和解決方法
首先明白什麼是同域：
同域簡單的解釋就是相同域名,埠相同,協議相同。
跨域:
瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能呼叫b.cn中的js,物件或資料(因為a.cn和b.cn是不同域),所以跨域就出現了.
解決方法：
1.jsonp
jsonp 全稱是JSON with Padding,是為了解決跨域請求資源而產生的解決方案,是一種依靠開發人員創造出的一種非官方跨域資料互動協議。
一個是描述資訊的格式，一個是資訊傳遞雙方約定的方法。
jsonp的產生:
1.AJAX直接請求普通檔案存在跨域無許可權訪問的問題,不管是靜態頁面也好.
2.不過我們在呼叫js檔案的時候又不受跨域影響
3.凡是擁有scr這個屬性的標籤都可以跨域例如<script><img><iframe>
4.如果想通過純web端跨域訪問資料只有一種可能,那就是把遠端伺服器上的資料裝進js格式的檔案裡.
5.而json又是一個輕量級的資料格式,還被js原生支援
6.為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback 引數給服務端
舉個例子:我在http://study.cn/json/jsonp/jsonp_2.html下請求一個遠端的js檔案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var message = function(data) { alert(data[1].title); }; </script> <script type="text/javascript" src="http://web.cn/js/message.js"></script> </head> <body> <div id='testdiv'></div> </body> </html>
遠端的message.js檔案是
message([
{"id":"1", "title":"天津新聞聯播，雷人搞笑的男主持人"},
{"id":"2", "title":"樓市告別富得流油 專家:房價下跌是大概率事件"},
{"id":"3", "title":"法國人關注時事 八成年輕人每天閱讀新聞"},
{"id":"4", "title":"新聞中的歷史,歷史中的新聞"},
{"id":"5", "title":"東陽新聞20140222"},
{"id":"6", "title":"23個職能部門要增加新聞釋出頻次"},
{"id":"7", "title":"《貴州新聞聯播》 中國美麗鄉村"},
{"id":"8", "title":"朝韓離散家屬團聚首輪活動結束"},
{"id":"9", "title":"索契冬奧會一天曝出兩例興奮劑事件"},
{"id":"10", "title":"今天中國多地仍將出現中度霾"}
]);這樣就實現跨域成功了,因為服務端返回資料時會將這個callback引數(message)作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。
jsonp形式的ajax請求:並且通過get請求的方式傳入引數,注意:跨域請求是隻能是get請求不能使用post請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var name = 'chenshishuo';
var sex = 'man';
var address = 'shenzhen';
var looks = 'handsome ';
$.ajax({
type : 'get',
url:'http://192.168.31.137/train/test/testjsonp',
data : {
name : name,
sex : sex,
address : address,
looks : looks,
},
cache :false,
jsonp: "callback",
jsonpCallback:"success",
dataType : 'jsonp',
success:function(data){
alert(data);
},
error:function(data){
alert('error');
}
});
});
</script>
</head>
<body>
<input id='inputtest' value='546' name='inputtest'>
<div id='testdiv'></div>
</body>
</html>jsonp 傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(預設為:callback)
jsonpCallback 自定義的jsonp回撥函式名稱，預設為jQuery自動生成的隨機函式名
2、代理：
例如www.123.com/index.html需要呼叫www.456.com/server.php，可以寫一個介面www.123.com/server.php，由這個介面在後端去呼叫www.456.com/server.php並拿到返回值，然後再返回給index.html，這就是一個代理的模式。相當於繞過了瀏覽器端，自然就不存在跨域問題。
3、PHP端修改header（XHR2方式）
在php介面指令碼中加入以下兩句即可：
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式