資訊專欄INFORMATION COLUMN
摘要：這里只講解了兩種常見的跨域方式，因為存在一些弊端，因此推薦使用等方式來解決跨域問題。
一、什么是 AJAX 跨域問題
同源策略規定，AJAX 請求（XMLHttpRequest）只能發給同源的網址，否則就會出錯。所謂的同源策略是指 3 個相同：協議相同、域名相同、端口相同。
比如 http://www.example.com/index.html 這個網址，協議是http ，域名是 www.example.com，端口是默認的 80。如果你在這個網站上使用 AJAX 發送 http://www.example1.com/index.html 請求，就會出錯，因為域名不同。
AJAX 跨域的根本原因是瀏覽器不允許這么做（不是服務端的問題），瀏覽器限制 AJAX 跨域請求的目的是為了保證用戶信息的安全，防止數據被惡意獲取。
二、JSONP 解決跨域問題2.1 JSONP 如何解決跨域問題
AJAX 請求非同源資源會發生跨域問題，但是有的 HTML 標簽支持非同源請求，舉例來說： 與
我們以 JONP 的形式（https://www.imooc.com/index/getstarlist?callback=test ）訪問。
2.3 JSONP 的弊端
需要在后端改動代碼，比如在 Spring 后臺代碼中需要配置一個 AbstractJsonpResponseBodyAdvice 切面，不過現在這個類已經過時了，也就是說現在不推薦使用 JSONP 來解決跨域問題
JSONP 默認只支持 GET 方式的請求
發送的不是 XMLHttpRequest 請求（script），所以不支持異步事件等，不過這也是為什么 JSONP 可以解決跨域問題的原因
三、CORS 解決跨域問題CORS 跨資源共享（Cross-origin resource sharing）是一種機制，它通過添加 HTTP 頭信息，解決 AJAX 跨域資源訪問問題。
CORS 請求可以分為兩類：簡單請求與非簡單請求，主要區別是非簡單請求在進行訪問之前，會發送一個預檢請求。“預檢”請求首先通過 OPTIONS 方法向另一域上的資源發送HTTP請求，以便確定實際請求是否安全發送。為了防止每次非簡單請求之前都發送預檢請求，可以在服務端設置預檢請求的緩存的時間。
3.1 簡單請求
請求方法為 HEAD、GET、POST 中的 1 種
請求的 header 中沒有自定義的請求頭
Content-Type 為以下幾種：application/x-www-form-urlencoded、multipart/form-data、text/plain
3.2 非簡單請求
header 中包含自定義請求頭 的 AJAX 請求
PUT、DELETE 形式的 AJAX 請求
Content-Type 字段的類型是 application/json 等
我自己在本地寫了一個測試跨域的 demo（Spring Boot），通過端口 8082 發出請求（攜帶自定義的請求頭）訪問端口為 8081 的服務。下面是 Chrome 控制臺有關 HTTP 的控制信息。
通過上面的圖可以看出 CORS 解決跨域問題的關鍵所在，添加必要的請求頭與響應頭信息，下面是有關的頭信息介紹。
3.3 HTTP 響應首部字段
Access-Control-Allow-Origin：指定了允許訪問該資源的外域 URI。對于不需要攜帶身份憑證的請求，服務器可以指定該字段的值為通配符，表示允許來自所有域的請求。
Access-Control-Allow-Methods：指明了實際請求所允許使用的 HTTP 方法
Access-Control-Expose-Headers：在跨域訪問時，XMLHttpRequest 對象的getResponseHeader() 方法只能拿到一些最基本的響應頭，如果要攜帶自定義的請求頭，需要在該首部中進行允許的請求頭放入白名單
Access-Control-Max-Age：非簡單請求預檢命令的最大緩存時間，在緩存時間內，對于非簡單請求，不會再發送預檢請求
Access-Control-Allow-Credentials：是否允許攜帶身份憑證（Cookie）的請求
3.4 HTTP 請求首部字段
Origin：表明預檢請求或實際請求的源 URL
Access-Control-Request-Method：用于預檢請求。其作用是，將實際請求所使用的 HTTP 方法告訴服務器
Access-Control-Request-Headers：用于預檢請求。其作用是，將實際請求所攜帶的首部字段告訴服務器
四、other能解決跨域的方式還有很多，比如禁止瀏覽器的跨域、Nginx 解決跨域等。這里只講解了兩種常見的跨域方式，因為 JSONP 存在一些弊端，因此推薦使用 CORS 等方式來解決跨域問題。
跨域問題，涉及到很多有關 HTTP 協議 的知識，希望大家重視計算機基礎知識。上面那個測試的 demo 上傳到了 GitHub，demo 是用 Spring Boot 實現的，有需要的可以點我前往~
參考資料跨域資源共享 CORS 詳解l
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例
Cross-Origin Resource Sharing (CORS)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98165.html
摘要：如何利用網頁請求暴露出來的接口去抓取網頁數據很多爬蟲都能實現這個功能。跨域通信時，瀏覽器會報如下錯誤其實這兩個問題都是由于跨域造成的。結果這些數據可以在請求成功會傳回本地。 如何利用網頁ajax請求暴露出來的接口去抓取網頁數據？很多爬蟲都能實現這個功能。不過今天要來和大家八一八單從前端的角度，利用js解決這個問題。 大家都知道，在不同域的情況下是不能發送ajax請求的，瀏覽器會報如下錯...
摘要：中間部分由或多個以，分隔的關鍵字值對構成，關鍵字字符串和值之間以分隔數組結構以開始，結束。 Q:AJAX以何種格式來交換數據？跨域的需求如何解決？ A:用JSON來傳數據，靠JSONP來跨域（具體參見下文） AJAX 創建對象 AJAX = Asynchronous(英[e??s??kr?n?s]) JavaScript and XML（異步的 JavaScript 和 XML）。...
摘要：數據仍然是通過頁面獲得，頁面僅需向頁面傳遞即可，頁面拿到函數名，并通過傳遞從服務器拿到的數據，在頁面執行頁面的回調函數，回調函數執行完畢后移除頁面以及該函數。以上是我所知道的解決跨域請求的兩種方法。 iframe跨域的基本前提是，一個頁面可以嵌套非同源站點的html文件，以及某一個域名下的html頁面可以通過腳本向同域名服務器發出ajax請求。當一個域名為domain1下的頁面A想要向...
摘要：前言中新增了一種數據請求的方式，就是，它和有許多相似的功能，但是相比被設計成更具可擴展性和高效性。該模式支持跨域請求，顧名思義它是以的形式跨域當然該模式也可以同域請求不需要后端額外的支持其對應的為。 前言 ES6中新增了一種HTTP數據請求的方式，就是fetch，它和XMLHttpRequest有許多相似的功能，但是相比XMLHttpRequest,fetch被設計成更具可擴展性和高效...
閱讀 3384·2023-04-25 14:07
閱讀 3452·2021-09-28 09:35
閱讀 2087·2019-08-30 15:55
閱讀 1403·2019-08-30 13:48
閱讀 2498·2019-08-30 13:16
閱讀 3199·2019-08-30 12:54
閱讀 3237·2019-08-30 11:19
閱讀 1872·2019-08-29 17:17
