同源策略規定，ajax 請求（xmlhttprequest比如這個**，協議是http，網域名稱是www.example.com，埠是預設的80。如果你在這個**上使用 ajax 傳送請求，就會出錯，因為網域名稱不同。
ajax 跨域的根本原因是瀏覽器不允許這麼做（不是服務端的問題），瀏覽器限制 ajax 跨域請求的目的是為了保證使用者資訊的安全，防止資料被惡意獲取。
2.1 jsonp 如何解決跨域問題
2.2 jsonp 示例
這裡我們以 mooc 網為例，當訪問時，會傳送乙個index/getstarlistajax 請求，下面是訪問後返回的 json 資料。
我們以 jonp 的形式（index/getstarlist?callback=test）訪問。
2.3 jsonp 的弊端
cors 跨資源共享（cross-origin resource sharing）是一種機制，它通過新增 http 頭資訊，解決 ajax 跨域資源訪問問題。
cors 請求可以分為兩類：簡單請求與非簡單請求，主要區別是非簡單請求在進行訪問之前，會傳送乙個預檢請求。「預檢」請求首先通過 options 方法向另一域上的資源傳送http請求，以便確定實際請求是否安全傳送。為了防止每次非簡單請求之前都傳送預檢請求，可以在服務端設定預檢請求的快取的時間。
3.1 簡單請求
3.2 非簡單請求
我自己在本地寫了乙個測試跨域的 demo（spring boot），通過埠 8082 發出請求（攜帶自定義的請求頭）訪問埠為 8081 的服務。下面是 chrome 控制台有關 http 的控制資訊。
通過上面的圖可以看出 cors 解決跨域問題的關鍵所在，新增必要的請求頭與響應頭資訊，下面是有關的頭資訊介紹。
3.3 http 響應首部字段
3.4 http 請求首部字段
能解決跨域的方式還有很多，比如禁止瀏覽器的跨域、nginx 解決跨域等。這裡只講解了兩種常見的跨域方式，因為 jsonp 存在一些弊端，因此推薦使用 cors 等方式來解決跨域問題。
跨域問題，涉及到很多有關http 協議 的知識，希望大家重視計算機基礎知識。上面那個測試的 demo 上傳到了 github，demo 是用 spring boot 實現的，有需要的可以點我前往~
跨域資源共享 cors 詳解l
【原創】說說json和jsonp，也許你會豁然開朗，含jquery用例
cross-origin resource sharing (cors)
ajax跨域 ajax跨域學習總結（一）
網域名稱又稱網域 網域名稱，是由一串用點分隔的名字組成的internet上某一台計算機或計算機組的名稱，用於在資料傳輸時標識計算機的電子方位 有時也指地理位置 internet的核心服務dns domain name system，網域名稱系統，有時也簡稱為網域名稱 提供網域名稱到ip位址的相對映。...
ajax跨域與cookie跨域
ajax跨域取資料 利用可以跨域載入js的原理 functioncallback 這是需要返回這樣乙個js函式 ajax資料型別使用jsonp 如 ajax url callbask x datatype jsonp type get 在使用資料型別為jsonp時,jquery自動會在url路徑上拼...
js跨域 ajax跨域 跨域方式（前端）
跨域方式 cors 跨域資源共享 當使用xmlhttprequest傳送請求時，瀏覽器會自動加上乙個請求頭 origin,後端在接受到請求後確定響應後會在response headers中加入乙個屬性 access control allow origin,值就是發起請求的源位址 瀏覽器得到響應會進...