寫在前面
今天在寫一個(gè)簡單的搜索框頁面的時(shí)候，遇到一個(gè)問題。輸入的關(guān)鍵字想要獲取服務(wù)器端（不是我自己的）傳來的數(shù)據(jù)，存在跨域的問題，那怎么辦呢，后來通過尋求幫助，得知可以用fiddler代理。當(dāng)然處理Ajax跨域問題有幾種方法，這里我講這種比較簡單，適合實(shí)時(shí)調(diào)試的方法，但不建議作為長遠(yuǎn)考慮。
背景介紹
跨域，就是跨域名，跨端口，跨協(xié)議。
例如：
http://www.a.com/index.html 調(diào)用 http://www.a.com/server.php （不算跨域）
http://www.a.com/index.html 調(diào)用 http://www.b.com/server.php （跨域，主域名不同：a/b）
http://abc.a.com/index.com 調(diào)用 http://def.a.com/server.php （跨域，子域名不同：abc/def）
http://www.a.com:8080/index.html 調(diào)用 http://www.a.com:8081/server.php （跨域，端口不同：8080/8081）
http://www.a.com/index.com 調(diào)用 https://www.a.com/server.php （跨域，協(xié)議不同：http/https）
注意：localhost和127.0.0.1雖然都指本機(jī)，但也算跨域
從上面兩張圖可見，要調(diào)用的接口和本機(jī)不在同一個(gè)域上，所以接下來要處理這個(gè)問題。
具體步驟
fiddler可以對用戶的請求和服務(wù)器的響應(yīng)進(jìn)行修改。我們知道如果我們請求一個(gè)服務(wù)器上不存在的文件一般是跳轉(zhuǎn)到一個(gè)404頁面，但是利用該工具就可以實(shí)現(xiàn)修改服務(wù)器響應(yīng)的結(jié)果，呈現(xiàn)給用戶一個(gè)自定義的文件——我們只需要攔截服務(wù)器的響應(yīng)并替換成我們自己的頁面即可。
fiddler下載地址：http://rj.baidu.com/soft/detail/10963.html?ald
1.設(shè)置代理配置
不同瀏覽器的設(shè)置方法不同，F(xiàn)irefox的設(shè)置方法如下：
而IE和Chrome是可以直接使用的，我這里用的是Chrome瀏覽器。
2.攔截服務(wù)器的響應(yīng)并替換成我們自己的頁面
由于接口的地址的域是http://api.bing.com，所以我們就自己請求一個(gè)地址（這個(gè)是可以隨意設(shè)置的，只要域匹配即可，建議后面部分用你的文檔名稱）：http://api.bing.com/search-page.html ，由于search-page.html在服務(wù)器根本不存在，所以會(huì)報(bào)404錯(cuò)誤。在Fiddler中我們捕獲到了這個(gè)響應(yīng)：
由于我的頁面還用到了一些圖片和其他文件，所以按照同樣的方法將錯(cuò)誤響應(yīng)改為我們本地的文件：
到這里，我們就解決了跨域的問題了，刷新我們一開始請求的網(wǎng)址：http://api.bing.com/search-page.html（你們打開看不見，因?yàn)槟銈兊碾娔X沒有設(shè)置代理，自己可以動(dòng)手試試）。發(fā)現(xiàn)可以用正常調(diào)用必應(yīng)接口的數(shù)據(jù)了。
可以看到，和必應(yīng)的搜索建議是一致的，調(diào)用成功了。
心得體會(huì)
作為一個(gè)沒有后臺(tái)相關(guān)知識(shí)的小白，最初遇到這個(gè)問題時(shí)挺苦惱的，通過fiddler代理成功實(shí)現(xiàn)Ajax跨域，我的搜索建議功能終于實(shí)現(xiàn)了。在這里記錄一下同時(shí)也分享給有需要的人。
