快捷導(dǎo)航

5種處理js跨域問(wèn)題方法匯總

更新時(shí)間：2014年12月04日 08:52:20 投稿：hebedich

本文匯總了解決js跨域問(wèn)題的5種方法，除了最后一種使用flash解決跨域問(wèn)題由于過(guò)于高端，沒(méi)有做出介紹外，其余四種都做了下總結(jié)，這里推薦給有相同需求的小伙伴。

前兩天碰到一個(gè)跨域問(wèn)題的處理，使用jsonp可以解決。（http://chabaoo.cn/article/57889.htm）

最近再整理了一下：

1.jsonp。

ajax請(qǐng)求，dataType為jsonp。這種形式需要請(qǐng)求在服務(wù)端調(diào)整為返回callback([json-object])的形式。如果服務(wù)端返回的是普通json對(duì)象。那么調(diào)試的時(shí)候，在chrome瀏覽器的控制臺(tái)會(huì)報(bào)"Uncaught SyntaxError: Unexpected token"錯(cuò)誤；在firefox瀏覽器的控制臺(tái)會(huì)報(bào)"SyntaxError: missing ; before statement"錯(cuò)誤。

2.iframe跨域。

頁(yè)面中增加一個(gè)iframe元素，在需要調(diào)用get請(qǐng)求的時(shí)候，將iframe的src設(shè)置為get請(qǐng)求的url即可發(fā)起get請(qǐng)求的調(diào)用。

復(fù)制代碼代碼如下:

var url = " $("#iframe").attr("src", url);//跨域，使用iframe

iframe方式強(qiáng)于jsonp，除了可以處理http請(qǐng)求，還能夠跨域?qū)崿F(xiàn)js調(diào)用。

3.script元素的src屬性處理

iframe、img、style、script等元素的src屬性可以直接向不同域請(qǐng)求資源，jsonp正是利用script標(biāo)簽跨域請(qǐng)求資源的簡(jiǎn)單實(shí)現(xiàn)，所以這個(gè)和jsonp本質(zhì)一樣，同樣需要服務(wù)端請(qǐng)求返回callback...形式。

復(fù)制代碼代碼如下:

var url=" var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);

4.在服務(wù)器使用get處理。

對(duì)于業(yè)務(wù)上沒(méi)有硬性要求在前端處理的，可以在服務(wù)端做一次封裝，再服務(wù)端發(fā)起調(diào)用，這樣就可以解決跨域的問(wèn)題。然后再根據(jù)請(qǐng)求是發(fā)出就完，還是需要獲取返回值，來(lái)決定代碼使用同步或者異步模式。

復(fù)制代碼代碼如下:

        private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)

        {

            if (string.IsNullOrEmpty(url))

            {

                throw new ArgumentNullException("url");

            }

            var request = WebRequest.Create(url) as HttpWebRequest;

            request.Method = "GET";

            if (!string.IsNullOrEmpty(userAgent))

            {

                request.UserAgent = userAgent;

            }

            if (timeout.HasValue)

            {

                request.Timeout = timeout.Value;

            }

            if (cookies != null)

            {

                request.CookieContainer = new CookieContainer();

                request.CookieContainer.Add(cookies);

            }

            request.BeginGetResponse(null,null);//異步

            //return request.GetResponse() as HttpWebResponse;

        }