分享一下最近用jQuery跨域請求的經歷,
希望能給大家一些關於這個方案的概念和資料。
該部分包括客戶端和服務器端,(如果服務器不在自己手上,那麼還是考慮通過自己的服務器轉發請求吧)
1.原本的代碼很簡單。。如果是同域名什麼問題都沒有 (有興趣的朋友可以嘗試在自己的服務器上運行以下代碼)
$.ajax({ url: "http://www.google.com/", //不同域名,而且google 沒有允許第三方提交所以會出錯 cache: false, //data: params, dataType: 'json', success: function (data) { console.log(data); }, error: function (e) { alert(e.statusText); } })
嗯,我的默認瀏覽器是Chrome, 上去一跑。。。當然不能用。。。什麼都還沒做呢,就想做跨域訪問這麼危險的事情
下面是Chrome給出的錯誤提示
2.在服務器端做點手腳,
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以設置爲詳細的地址
3. 好了現在Chrome中的Get已經可以運行了,依葫蘆畫瓢開發了Post方法。。。。發現Post不能用。。。。- -# 真是不順利啊
在Fiddler中發現客戶端提交的是OPTIONS的請求。。。。恩。。。。。那就加一段邏輯處理OPTIONS
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // 可以設置爲詳細的地址 if (HttpContext.Current.Request.HttpMethod == "OPTIONS") // 加點邏輯 { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); }
實際運行中有兩次請求 第一次是OPTIONS 第二次纔是POST
4.還有問題。。。。忽然發現在IE8和IE9中無法運行,而在其他的瀏覽器中都正常(opera未測試,google說這個瀏覽器也有問題。不過這東西比較小衆)
使用Fiddler發現 這個動作根本沒有被提交到服務器端。。。。
經常Google以後發現。。。。IE8以上的版本跨域提交需要使用XDomainRequest 對象。。。。(IE 爲什麼每次你都這麼另類!,jQuery你爲什麼不兼容ie8和ie9的跨域提交功能。。加點代碼很麻煩麼!!!)
var xdr = new XDomainRequest(); xdr.onload = function (e) { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //success }; xdr.onerror = function (e) { //error } xdr.open("GET", url); xdr.send();
關於 XDomainRequest 請在這裏查看詳細,http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
5.恩 get功能在ie中也可以了。。。不錯不錯, POST還不行。。。莫非又是IE的問題?? 這。。怎麼每個功能都這麼多問題?
奇怪的是Fiddler中顯示IE8 中POST請求確實發出去了啊。。。怎麼回事??
把問題分解來看,吧fiddler獲取的http request raw數據拿出來 單獨提交試試。。。也不行?! 服務器返回415。。。 看來好像不是ie的問題。(這次冤枉了它了)
仔細排查,發現缺少Content-Type(Content-Type其實不是必須的,參考RFC)
這坑爹的WCF 3.5啊, 不傳Content Type就給我報415異常 (WCF 4.0已經解決這個問題,3.5解決起來很麻煩,我一怒之下用了普通的ashx來處理)
.....嗯。。。少什麼我加什麼。。。 what?!!! XDomainRequest 不能隨便設置header,
var xdr=new XDomainRequest (); xdr.contentType="application/json"; //異常。。。。。。。 xdr.contentType = "text/plain"; //這是唯一可以設置的值。。。。MS。。。我要json不要這個。。。。
好吧javascript這邊設置失敗了。。只能去服務器動手腳。。。想死的心都有了。。。。做點功能怎麼這麼麻煩。。。
到此爲止,總算告一個段落了。。。
附錄1
用來解決跨域問題的,服務器端代碼
public class Global : System.Web.HttpApplication { protected void Application_BeginRequest(object sender, EventArgs e) { if (HttpContext.Current != null && HttpContext.Current.Response != null) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // take care if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With"); HttpContext.Current.Response.End(); } } } }
服務器也可以通過放置crossdomain.xml在根目錄下指定該邏輯,參考http://www.weibo.com/crossdomain.xml
附錄2 用來解決客戶端問題的參考代碼(代碼比較潦草,不過重要的是邏輯)
function cloverGet(url, params, isRenderLoading, callback) { if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) { var xdr = new XDomainRequest(); xdr.onload = function (e) { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //需要手動處理json數據 }; xdr.onerror = function (e) { } xdr.open("GET", url); xdr.send(); } else { $.ajax({ url: url, cache: false, data: params, dataType: 'json', success: function (data) { }, error: function (e) { }, complete: function (e) { }, beforeSend: function (xhr) { } }); } } function cloverPost(url, params, callback) { if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) { var xdr = new XDomainRequest(); xdr.contentType = "text/plain"; xdr.onload = function () { var data = $.parseJSON(xdr.responseText); if (data == null || typeof (data) == 'undefined') { data = $.parseJSON(data.firstChild.textContent); } //需要手動格式化 }; xdr.onerror = function (e) { } xdr.open("POST", url); xdr.send(params); //這裏的數據是 a=1&b=2這樣的 } else { $.ajax({ type: "POST", url: url, data: params, // dataType: "json", //有的時候jsonp也是一個選擇 crossDomain: true, success: function (data) { }, error: function (e) { }, complete: function (e) { }, beforeSend: function (xhr) { } }); } }
- get和post都行了。。。還有文件上傳呢。。。這樣的POST是不能傳文件的。。 (考慮用第三方方案或者不要直接提交)
- 善用工具 例如Fiddler 還有javascript/HTML調試工具 (我個人覺得Chrome和FF的調試器比較好用)似乎不少人還習慣用alert調試。。。。
- IE和safari 跨域iframe有問題, 記得設置header,例如: Response.Headers["p3p"] = "CP=IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT";
- 有興趣的朋友可以瞭解一下XSS和CSRF,這可是網站的一大安全問題
- 分解問題是排查問題的一個很好的辦法
- 更多的時候,使用同域名的代理服務器是很好的解決方案 (也是唯一的解決方案,如果瀏覽器直接調用第三方有權限問題的話)
本人水平有限,如果有所遺漏和謬誤,請各位朋友指正,希望一起討論學習和進步