5種處理js跨域問題方法匯總


 

1.JSONP跨域GET請求

   ajax請求,dataType為jsonp。這種形式需要請求在服務端調整為返回callback([json-object])的形式。如果服務端返回的是普通json對象。那么調試的時候,在chrome瀏覽器的控制台會報"Uncaught SyntaxError: Unexpected token"錯誤;在firefox瀏覽器的控制台會報"SyntaxError: missing ; before statement"錯誤。

JSON是一種輕量級的數據交換格式,像xml一樣,是用來描述數據間的。

JSONP是一種使用JSON數據的方式,返回的不是JSON對象,是包含JSON對象的javaScript腳本。

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源。若要跨域請求出於安全性考慮是不行的,但是我們發現,Web頁面上調用js文件時則不受是否跨域的影響,而且擁有”src”這個屬性的標簽都擁有跨域的能力,比如<script><img><iframe>,這時候,聰明的程序猿就想到了變通的方法,如果要進行跨域請求, 通過使用htmlscript標記來進行跨域請求,並在響應中返回要執行的script代碼,其中可以直接使用JSON傳遞 javascript對象。即在跨域的服務端生成JSON數據,然后包裝成script腳本回傳,着不就突破同源策略的限制,解決了跨域訪問的問題了么。

2.iframe跨域。

   頁面中增加一個iframe元素,在需要調用get請求的時候,將iframe的src設置為get請求的url即可發起get請求的調用。

var url = "http://xxx.xxx.xxx?p1=1&p2=2";
$("#iframe").attr("src", url);//跨域,使用iframe

iframe方式強於jsonp,除了可以處理http請求,還能夠跨域實現js調用。

3.script元素的src屬性處理

   iframe、img、style、script等元素的src屬性可以直接向不同域請求資源,jsonp正是利用script標簽跨域請求資源的簡單實現,所以這個和jsonp本質一樣,同樣需要服務端請求返回callback...形式。

var url="http://xxx.xxx.xxx?p1=1";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);

4.在服務器使用get處理。

   對於業務上沒有硬性要求在前端處理的,可以在服務端做一次封裝,再服務端發起調用,這樣就可以解決跨域的問題。然后再根據請求是發出就完,還是需要獲取返回值,來決定代碼使用同步或者異步模式。

 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;
        }

5.flash跨域

過於尖端了==,再研究

總結:以上5種方法就是常見的解決js跨域問題的處理方法了,最后一種比較高端,等我研究清楚了再補上吧。

<script>

<img>

<iframe src>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM