在實際中，幾乎90%的數據是來源于服務端，前端和服務端之間的數據交互一般通過ajax請求來完成。

說起ajax，一般都是用到jQuery。除了擁有強大的DOM處理能力，jQuery提供了較豐富的ajax處理方法，它不僅支持基于XMLHttpRequest的ajax請求，也能處理跨域的JSONP請求。

Vue.js和jQuery一起使用基本沒有沖突，盡可放心大膽地使用。

同源策略和跨域概念 跨域資源共享 JSONP概念 REST Web Services 基于$.ajax實現跨域GET請求 基于$.ajax實現JSONP請求 基于$.ajax實現跨域POST請求 基于$.ajax實現跨域PUT請求 基于$.ajax實現跨域DELETE請求

本文的服務端程序和客戶端程序是部署在不同服務器上的，本文所有示例請求都是跨域的。
源代碼已放到GitHub，如果您覺得本篇內容不錯，請點個贊，或在GitHub上加個星星！

CORS GET JSONP GET CORS POST CORS PUT 完整CURD示例 GitHub Source 基礎概念

在進入本文正題之前，我們需要先了解一些基礎概念（如果你已經對這些基礎有所了解，可跳過此段落）。

同源策略和跨域概念

同源策略（Same-orgin policy）限制了一個源（orgin）中加載腳本或腳本與來自其他源（orgin）中資源的交互方式。
如果兩個頁面擁有相同的協議（protocol），端口（port）和主機（host），那么這兩個頁面就屬于同一個源（orgin）。

同源之外的請求都可以稱之為跨域請求。
下表給出了相對http://store.company.com/dir/page.html同源檢測的示例：

URL 結果 原因 http://store.company.com/dir2/other.html 成功 http://store.company.com/dir/inner/another.html 成功 https://store.company.com/secure.html 失敗 協議不同 http://store.company.com:81/dir/etc.html 失敗 端口不同 http://news.company.com/dir/other.html 失敗 主機名不同

我們可以簡單粗暴地理解為同一站點下的資源相互訪問都是同源的，跨站點的資源訪問都是跨域的。 跨域資源共享

跨域資源共享（CORS）是一份瀏覽器技術的規范，提供了Web服務器從不同網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是JSONP模式的現代版。與JSONP不同，CORS除了支持GET方法以外，還支持其他HTTP方法。用CORS可以讓網頁設計師用一般的XMLHTTPRequest，這種方式的錯誤處理比JSONP要來的好。另一方面，JSONP可以在不支持CORS的老舊瀏覽器上運作，現代的瀏覽器都支持CORS。

在網頁http://caniuse.com/#feat=cors上列出了主流瀏覽器對CORS的支持情況，包含PC端和移動端的瀏覽器。