本部落格歡迎轉載，轉載時請以超連結形式標明文章原始出處！謝謝！

1. 基本術語

• AJAX（Asynchronous JavaScript And XML，非同步JavaScript和XML）：AJAX是一種用於建立快速動態網頁的技術，通過在後臺與伺服器進行少量資料交換，AJAX可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
• JSON（JavaScript Object Notation）：JSON是一種輕量級的資料交換格式，可以看成是由大括號包裹起來的多個"key/value"對，格式如下：{"firstName":"Brett", "lastName":"McLaughlin", "email":"
  [email protected]"}。
• Cross Domain（跨域）：跨域問題是由於JavaScript語言安全限制中的同源策略造成的，當在頁面上使用AJAX請求訪問其他伺服器的資料時，客戶端就會出現跨域問題。
• Same Origin Policy（同源策略）：同源策略是指一段指令碼只能讀取來自同一來源的視窗和文件的屬性，域名、協議、埠均相同，即是同源。

2. JavaScript跨域解決方案
目前主要有三種JavaScript跨域解決方案：

• 基於iframe實現跨域：兩個頁面必須屬於一個基礎域（例如都是xxx.com，或是xxx.com.cn），使用同一協議（例如都是HTTP）和同一埠（例如都是80）。iframe方案對域名、協議、埠的限制太多，用處不大。
• 基於Script標籤實現跨域（JSONP方案）：JSONP（JSON with Padding）是JSON的一種“使用模式”，是一種非官方的跨域資料互動協議，可用於解決主流瀏覽器的跨域資料訪問的問題。JSONP方案的侷限性在於：JSONP只能實現GET請求。
• 基於後臺代理實現跨域（CORS方案）：CORS（Cross-Origin Resource Sharing，跨域資源共享）是一個W3C標準，它允許瀏覽器向跨源伺服器發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

3. 基於後臺代理實現跨域（CORS方案）

具體解決方案如下：
① 伺服器端
伺服器端需要在正常的HTTP迴應中增加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等欄位。
我的伺服器端是用Python寫的，HTTP請求呼叫的webob.Request。
修改辦法是，在“res = req.get_response(self.app)”這行程式碼之後，需要增加如下幾行內容：

res.headerlist.append(('Access-Control-Allow-Origin', '*'))
res.headerlist.append(('Access-Control-Allow-Methods', 'GET, POST'))
res.headerlist.append(('Access-Control-Max-Age', '3600'))
res.headerlist.append(('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Max-Age, X-Auth-Token, Content-Type, Accept'))
 

其中，Access-Control-Allow-Origin最好限制為前端的訪問地址，這樣才相對安全，例如：

res.headerlist.append(('Access-Control-Allow-Origin', 'http://10.111.121.26:8080'))

另外，Access-Control-Max-Age可以設定CORS相關配置的快取時間，這樣客戶端就不必每次都先進行一次預檢請求（Preflight Request）。

預檢請求會先向伺服器端發出一個OPTIONS方法、包含“Origin”頭的請求。只有該請求獲得允許以後，才會發起真實的跨域請求。

所以，伺服器端在對X-Auth-Token進行鑑權時還需要放過預檢請求，例如：

def process_request(self, req):
    if (req.headers.get('X-Auth-Token') != 'open-sesame') and (req.method != 'OPTIONS'):
        return exc.HTTPForbidden()

② 客戶端
HTTP請求需要注意到幾個地方：
data需要保證是JSON格式的字串；
contentType規定了編碼格式是UTF8；
dataType規定了返回內容是JSON格式。
具體的呼叫程式碼如下：

data_param = {"timeType":"LAST_7_DAYS", "hostType":"ALL_HOSTS"}
$.ajax({
    url:"http://172.16.17.11:41128/dpi/webApp/eventRetrieve",  
    type: "POST",
    data:JSON.stringify(data_param),
    headers:{
        "X-Auth-Token":"open-sesame",
        "Content-Type":"application/json"
    },
    contentType: 'text/html; charset=UTF-8',   	
    dataType: "json",
    success: function(data) {
        alert(data); // Object
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
    },
    complete: function(XMLHttpRequest, textStatus) {
    }
});