下面我就為大家帶來一篇跨域請求的完美解決方法(JSONP, CORS)。現在就分享給大家,也給大家做個參考。 一個眾所周知的問題,Ajax直接請求普通檔案存在跨網域無權限存取的問題。解決方法有JSONP,Flash等等。 JSONP 我們發現,Web頁面上呼叫js檔案時不受是否跨域的影響,凡是擁有"src"這個屬性的標籤都擁有跨域的能力,例如、<img>、<iframe>。那就是說如果要跨域存取數據,就服務端只能把數據放在js格式的檔案裡。恰巧我們知道JSON可以簡潔的描述複雜數據,而且JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數據。然後客戶端就可以透過與呼叫腳本一模一樣的方式,來呼叫跨域伺服器上動態產生的js格式檔案。客戶端在對JSON檔案呼叫成功之後,也就獲得了自己所需的資料。這就形成了JSONP的基本概念。允許用戶傳遞一個callback參數給服務端,然後服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。 </p> <p>jQuery支援JSONP的呼叫。在另外的一個網域中指定好回呼函數名稱,就可以用下面的形式來就載入JSON資料。 <br></p> <p class="jb51code"></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">url?callback=? jQuery.getJSON(url + "&callback=?", function(data) { alert(data.a + data.b); });</pre><div class="contentsignin">登入後複製</div></div><p></p> <p>服務端當然也要提供JSONP的支持,其實只要提供讀寫callback這個params就可以了。 <br></p> <p><span style="color: #ff0000"><strong>跨域資源共享(CORS)<br></strong></span></p> <p>#Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定義了在跨網域存取資源時瀏覽器和伺服器之間如何通訊。 CORS背後的基本想法是使用自訂的HTTP頭部允許瀏覽器和伺服器相互了解對方,從而決定請求或回應成功與否。 <br></p> <p><span style="background-color: #ccffcc">CORS與JSONP相比,更為先進、方便、可靠。 </span></p> <p>1、 JSONP只能實作GET請求,而CORS支援所有類型的HTTP請求。 <br></p> <p>2、 使用CORS,開發者可以使用普通的XMLHttpRequest發起請求和獲得數據,比起JSONP有更好的錯誤處理。 <br></p> <p>3、 JSONP主要由舊的瀏覽器支持,它們往往不支援CORS,而絕大多數現代瀏覽器都已經支援了CORS。 <br></p> <p>對一個簡單的請求,沒有自訂頭部,要麼使用GET,要麼使用POST,它的主體是text/plain,請求用一個名叫Orgin的額外的頭部發送。 Origin頭包含請求頁面的頭部(協議,域名,連接埠),這樣伺服器可以輕鬆的決定它是否應該提供回應。 <br></p> <p>伺服器端對於CORS的支持,主要就是透過設定Access-Control-Allow-Origin來進行的。 <br></p> <p><span style="color: #ff00ff">Header set Access-Control-Allow-Origin * <br></span></p> <p>為了防止XSS攻擊我們的伺服器, 我們可以限制網域,例如<br></p> <p><span style="color: #ff00ff">Access-Control-Allow-Origin: http://www.jb51.net<br></span></p> <p>很多服務都已經提供了CORS支持,例如AWS支援跨域資源分享功能CORS,上傳至S3不需要代理程式。 </p> <p>上面是我整理給大家的,希望今後對大家有幫助。 </p> <p>相關文章:</p> <p><a href="http://www.php.cn/js-tutorial-396466.html" target="_blank">重點分析JavaScript重寫alert()方法的技巧</a><br></p> <p><a href="http://www.php.cn/js-tutorial-396453.html" target="_blank">JavaScript的基本語法及變數講解 </a><br></p> <p><a href="http://www.php.cn/js-tutorial-396471.html" target="_blank">javascript模擬重載,toString方法的重寫的詳情解</a><br></p> <p></p> <p class="clearfix"><span class="jbTestPos"> </span></p>