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