首頁  >  文章  >  後端開發  >  Ajax跨域的完美解決方案實例分享

Ajax跨域的完美解決方案實例分享

小云云
小云云原創
2018-01-08 15:46:081523瀏覽

公司要做一個活動頁面,在其過程中發現所有的接口,ajax請求跨域。這裡對跨域做個簡單介紹以及提供幾個解決方案。

  由於瀏覽器實現的同源策略的限制,XmlHttpRequest只允許請求當前來源(網域名稱、協定、連接埠)的資源,所以AJAX是不允許跨域的。這裡提供自己常用的三種方法:

1、jsonp存取

  JSONP(JSON with Padding)是一個非官方的協議,它允許在伺服器端整合Script tags返回到客戶端,透過javascript callback的形式實現跨域存取;

實作方式

  1)

<script type="text/javascript"> 
  $.ajax({ 
    url:url, 
    dataType:'jsonp', 
    data:'', 
    jsonp:'callback', 
    success:function(result) { 
    }, 
  }); 
</script>

  2)

$.getJSON(url+"?callback=?", 
  function(result) { 
  });

只能註:1】 jsonp只能附註:1】 jsonp用get請求,就算你用了post請求,也會自動給你轉換成post;

  2】 jsonp 不僅可以用來取得數據,也可以用來提交數據。

2、damain 方法

  在主域相同,子域不同的情況下可以用這種方法,修改域名指向,讓他們指向同一域名,這種辦法也只能解決主域相同而二級網域不同的情況,兩個毫無關係的網址是不可以用這種方法的;

document.domain = 'a.com'

註:在實際開發中,很多人會在本地調試接口,localhost的域名和公司的域名完全不一樣,所有用了domain這種辦法也無法產生效果,解決辦法是修改c盤裡的host文件,把本地地址localhost修改成公司域名或者公司二級域名,然後這種方法就可以使用了。

以下是修改後的網域指向:

#127.0.0.1  localhost
127.0.0.1   公司.com

3、postMessage

1  h5的一個新功能之一,由於我們是一家做h5遊戲的公司,不可避免的要嵌套iframe,方便資料提交等。

  這裡假設,iframe的Id為'iframe';

#  在iframe裡面的js裡要寫上

var message = 'date';<br>if (parent.document.getElementById(‘iframe‘)) {
          //捕获iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //发送消息
          parent.postMessage(message, "*");
        }

  在iframe外面的js裡要寫上##jsreee

  在iframe外面的js裡要寫上

window.addEventListener('message',function(e){
      },false);
  然後就可以拿到message的資料了。

相關推薦:

ajax跨域請求下parsererror的錯誤解決方法

JS實作Ajax跨域請求flask回應內容

實例詳解Ajax跨域請求的原理

###

以上是Ajax跨域的完美解決方案實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn