寫在前面
今天在寫一個簡單的搜索框頁面的時候外莲，遇到一個問題猪半。輸入的關(guān)鍵字想要獲取服務(wù)器端（不是我自己的）傳來的數(shù)據(jù)，存在跨域的問題偷线，那怎么辦呢磨确，后來通過尋求幫助，得知可以用fiddler代理声邦。當(dāng)然處理Ajax跨域問題有幾種方法乏奥，這里我講這種比較簡單，適合實時調(diào)試的方法亥曹，但不建議作為長遠考慮邓了。
背景介紹
跨域，就是跨域名媳瞪，跨端口骗炉，跨協(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雖然都指本機乍丈，但也算跨域
從上面兩張圖可見忆矛，要調(diào)用的接口和本機不在同一個域上，所以接下來要處理這個問題铭若。
具體步驟
fiddler可以對用戶的請求和服務(wù)器的響應(yīng)進行修改洪碳。我們知道如果我們請求一個服務(wù)器上不存在的文件一般是跳轉(zhuǎn)到一個404頁面，但是利用該工具就可以實現(xiàn)修改服務(wù)器響應(yīng)的結(jié)果叼屠，呈現(xiàn)給用戶一個自定義的文件——我們只需要攔截服務(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，所以我們就自己請求一個地址（這個是可以隨意設(shè)置的荚坞，只要域匹配即可挑宠，建議后面部分用你的文檔名稱）：http://api.bing.com/search-page.html ，由于search-page.html在服務(wù)器根本不存在颓影，所以會報404錯誤各淀。在Fiddler中我們捕獲到了這個響應(yīng)：
由于我的頁面還用到了一些圖片和其他文件，所以按照同樣的方法將錯誤響應(yīng)改為我們本地的文件：
到這里诡挂，我們就解決了跨域的問題了碎浇，刷新我們一開始請求的網(wǎng)址：http://api.bing.com/search-page.html（你們打開看不見，因為你們的電腦沒有設(shè)置代理璃俗，自己可以動手試試）奴璃。發(fā)現(xiàn)可以用正常調(diào)用必應(yīng)接口的數(shù)據(jù)了。
可以看到城豁，和必應(yīng)的搜索建議是一致的苟穆，調(diào)用成功了。
心得體會
作為一個沒有后臺相關(guān)知識的小白唱星，最初遇到這個問題時挺苦惱的雳旅，通過fiddler代理成功實現(xiàn)Ajax跨域，我的搜索建議功能終于實現(xiàn)了间聊。在這里記錄一下同時也分享給有需要的人岭辣。
