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

2019-11-20 13:49:25

字體：大中小

來源：轉載

供稿：網友

前兩天碰到一個跨域問題的處理，使用jsonp可以解決。（//m.survivalescaperooms.com/article/57889.htm）

最近再整理了一下：

1.jsonp。

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

2.iframe跨域。

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

復制代碼代碼如下:

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

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

3.script元素的src屬性處理

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

復制代碼代碼如下:

var url="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;
        }