原文鏈接：http://blog.csdn.net/cloudcraft/article/details/8986798

---

一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題。解決方法有JSONP，Flash等等。

JSONP

原理

我們發現，Web頁面上調用js文件時不受是否跨域的影響，凡是擁有"src"這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>。那就是說如果要跨域訪問數據，就服務端只能把數據放在js格式的文件里。恰巧我們知道JSON可以簡潔的描述復雜數據，而且JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據。然后客戶端就可以通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件。客戶端在對JSON文件調用成功之后，也就獲得了自己所需的數據。這就形成了JSONP的基本概念。允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

jQuery支持

// jQuery支持JSONP的調用。在另外的一個域名中指定好回調函數名稱，就可以用下面的形式來就加載JSON數據。url?callback=? jQuery.getJSON(url + "&callback=?", function(data) { alert(data.a + data.b); });

服務器支持

服務端當然也要提供JSONP的支持，其實只要提供讀寫callback這個params就可以了。

跨域資源共享（CORS）

原理

Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定義了在跨域訪問資源時瀏覽器和服務器之間如何通信。CORS背后的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務器相互了解對方，從而決定請求或響應成功與否。

與JSONP對比

CORS與JSONP相比，更為先進、方便和可靠。 1、 JSONP只能實現GET請求，而CORS支持所有類型的HTTP請求。 2、 使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得數據，比起JSONP有更好的錯誤處理。 3、 JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS。

服務器支持

對一個簡單的請求，沒有自定義頭部，要么使用GET，要么使用POST，它的主體是text/plain,請求用一個名叫Orgin的額外的頭部發送。Origin頭部包含請求頁面的頭部（協議，域名，端口），這樣服務器可以很容易的決定它是否應該提供響應。 服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。 Header set Access-Control-Allow-Origin * 為了防止XSS攻擊我們的服務器， 我們可以限制域，比如 Access-Control-Allow-Origin: http://blog.csdn.net 很多服務都已經提供了CORS支持，比如 AWS 支持跨域資源分享功能CORS，向S3上傳不需要代理。

轉載于:https://www.cnblogs.com/dajie-helloworld/p/7456782.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的跨域问题汇总【已收录 CORS JSONP】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。