一個IOS程序員源碼下載眼中的跨域問題
為了模擬真實的環境，所以HBulder新建了WebApp，跑起來可以針我的大玫瑰金上運行看效果（iphone6s plus玫瑰金）。我很傻的以為手機上運行沒錯就沒問題了，不會存在傳說中的跨域問題，沒想到周五下午要合並代碼到Dev分支，才發現合並進去頁面報錯。
235833_q0iv_1778933.png
修改前
$.ajax({
type: "post",
url: early_children_url ,
data:urlJson,
success: function(data) {
console.log(storageData);
//省略...
修改後
var neonataldetail = ‘{‘ +
‘"babyinfoid":"‘ + earlyBabyInfoId + ‘",‘ +
‘"days":"‘ + day + ‘",‘ +
‘"feedingtimes":"‘ + feedingtimes + ‘",‘ +
‘"feedingway":"‘ + feedingway + ‘",‘ +
‘"stoolfrequency":"‘ + stoolfrequency + ‘",‘ +
‘"yellowish":"‘ + yellowish + ‘",‘ +
‘"weight":"‘ + weight + ‘"‘ +
‘}‘;
var dataJson = {
"type": early_children_perinatal_type,
"neonataldetail": JSON.parse(neonataldetail)
};
var urlJson = JSON.stringify(dataJson);
$.ajax({
dataType: "jsonp",
type: "post",
url: early_children_url + "?s=" + urlJson,
success: function(data) {
console.log(storageData);
swal({
title: "提交成功",
text: "",
showCancelButton: false,
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function(data) {
window.location.href = "early-children.html";
});
},
error: function() {
swal("上傳失敗，請檢查網絡後重試");
}
});
最後查了相關的資料發現跨域問題大體有3種解決方案：（1）、代理；（2）、JSONP（支持get請求）；（3）、XHR2；（4）、CORS跨域資源共享；（5）、通過修改document.domain來解決iframe跨域問題；(6)、window.name進行跨域;(7)、HTML5的window.postMessage方法
具體說明：基於瀏覽器的安全考慮，由於同源策略的限制，不同域名、不同端口、不同協議的對象不能互相調用。（其實瀏覽器成功發送請求並拿回了數據 只是瀏覽器的同源策略 禁止了獲取 ）
代理：通過統一域名下的Web服務器創建一個代理。
舉例說明：www.hangzhou.com的a.html需要調用www.shanghai.com下的b.php服務，顯然這違反了同源策略，所以就需要通過代碼這個方法去解決問題。具體怎麽做？可以在www.hangzhou.com下可以寫個exchange.php。將去請求www.shanghai.com下的服務，之後將結果返回給a.html。這樣訪問www.hangzhou.com/exchange.php的效果等於訪問www.shanghai.com的服務
JSONP：JSON with padding。是JSON的一種使用方式，適用於主流瀏覽器的跨域訪問問題。JSONP由2部分組成：回調函數和數據
//www.hangzhou.com
js文件載入成功後會執行我們在url參數中指定的函數，所以JSONP是需要服務端進行配合的。
//www.shanghai.com
<?php
$callback = $_GET[‘callback‘];//得到回調函數名
$data = array(‘a‘,‘b‘,‘c‘);//要返回的數據
echo $callback.‘(‘.json_encode($data).‘)‘;//輸出
?>
XHR2：HTML5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能。但不適配所有瀏覽，比如IE10以下的版本均不支持。
此外還需要在服務端修改
header(‘Access-Controller-Allow-Origin:*‘);
header(‘Access-Controller-Allow-Methods:POST、GET‘);
window.onload = function () {
var xhr = new XMLHttpRequest();
//判斷瀏覽器是否支持XHR2
if (xhr.withCredentials === undefined) return false;
xhr.open("get", "http:// www.baidu.com");
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;//忽略未完成的調用
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.send(null);
}
CORS跨域資源共享:Cross-Origin Resource Sharing定義了進行訪問跨域資源時瀏覽器如何與服務器通信。
如果使用CORS
代碼與之前的代碼差別就是使用了絕對路徑。服務端對於CORS的支持在於Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。
CORS和JSONP對比
1、JSONP只可以實現get請求，CORS可以所有類型的HTTP請求
2、CORS開發者可以使用普通的XMLHTTPRequest請求和獲取數據
3、JSONP支持較老的瀏覽器，而老版本的瀏覽器不支持CORS
通過修改document.domain來跨域
瀏覽器的同源策略限制之一就是不能通過Ajax去請求不同源的文檔，限制之二就是瀏覽器中不同域的框架之間是不能進行js交互。
不同框架之間可以獲取window對象，但是window對象的屬性和方法不可獲取到。
http:// www.hangzhou.com/a.html的一個frame的src是http:// www.xihu.hangzhou.com/b.html這時候document.domain就可以上場了，
不過需要註意，document.domain的設定有限制，必須設置成自身或比自身更高一級的父域，且主域必須相同。
在頁面http:// xihu.hangzhou.com/b.html也需要設置
通過window.name來跨域
window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的
HTML5的window.postMessage方法跨域
window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬於同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。
一個IOS程序員源碼下載眼中的跨域問題