Sencha Touch跨域問題解決

之前對于跨域問題僅有粗淺的認識，一般是浏覽器層面出于安全性的考慮，不允許調用其他頁面的對象。這次在sencha touch中解決這個問題額外花掉不少時間。

解決的方法大概就是：

修改伺服器的header；

jsonp。jsonp方法是一種非官方的解決方案，隻支援get方法，需要伺服器端根據callback參數傳回不同的内容。傳回的内容不是标準的json格式，對伺服器端的改動會比較麻煩。我選擇了修改伺服器傳回的header的方法。

将header的access-control-allow-origin設為允許的域名清單，我這裡直接設定為星号了。項目采用的是ssh的架構。在jsp檔案中，可以使用response.addheader方法修改header，在所有頁面都會包含的公共檔案中加入即可。更好的辦法是寫一個filter，對json請求的路徑攔截，修改header：

對于iframe跨域的問題，可以将設定“p3p"為"cp=cao psa our"。

在新版的chrome浏覽器下，上述方法仍然無法達到目的，需要将header的access-control-allow-headers設為origin, x-requested-with, content-type, accept。

一般情況下跨域問題已經解決了。在sencha touch下發現每一個ajax請求都發送了兩次，其中一次的請求方法為options。我隻知道常用的get、post，聽說過put、delete。查過後才知道options方法是用于擷取指定url能接收的請求方法。我用jquery發送get請求沒有出現，手寫httpxmlrequest也沒有出現。這樣的問題在stackoverflow和sencha論壇上也看到有不少人遇到。用web調試工具找發送options請求的地方，沒有找到。對于jquery和sencha的http請求頭，發現了問題所在。sencha發送的頭中包含了x-requested-with的頭，jquery中沒有。估計是這個請求頭觸發了浏覽器去探測該url可用的請求方法。大多伺服器都不支援這個方法，覺得sencha這麼做是多此一舉了。如果是使用ext.ajax.request發送請求，直接在配置中寫usedefaultxhrheader : false就可以了。但是這裡是将請求用在ext.data.store中，不支援這個配置。懶得該太多源檔案支援這個配置，直接将connection.js中這個配置的預設值改為false。

另外還遇到sencha touch編譯的坑。特定版本編譯報logger.js不存在，需要将app.json中的buildoptions下logger的值由"no"改為"false"。接下來需要解決的sencha touch的坑是開發環境運作問沒問題，編譯後界面部分不顯示，互動出問題。

感謝ibm實習的機會，讓我學會了web調試。感謝萬能的stackoverflow，能找到各種問題的解決方案。