一、同源政策
- 跨域問題其實就是瀏覽器的同源策略造成的，同源策略限制了從同一個源加載的檔案或腳本如何與另一個源的資源進行互動，這是瀏覽器的一個用于隔離潛在惡意檔案的重要的安全機制，同源指的是：協議、埠號、域名必須一致，同源策略：protocol（協議）、domain（域名）、port（埠）三者必須一致，同源政策的目的主要是為了保證用戶的資訊安全，它只是對 js 腳本的一種限制，并不是對瀏覽器的限制，對于一般的 img、或者script 腳本請求都不會有跨域的限制，這是因為這些操作都不會通過回應結果來進行可能出現安全問題的操作，同源政策主要限制了三個方面，
- 當前域下的 js 腳本不能夠訪問其他域下的 cookie、LocalStorage、SessionStorage 和 indexDB，
- 當前域下的 js 腳本不能夠操作訪問操作其他域下的 DOM，
- 當前域下 ajax 無法發送跨域請求，
二、解決跨域問題方法
1.CORS
- 跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運行在一個 origin (domain)上的Web應用被準許訪問來自不同源服務器上的指定的資源，當一個資源從與該資源本身所在的服務器不同的域、協議或埠請求一個資源時，資源會發起一個跨域HTTP 請求，CORS需要瀏覽器和服務器同時支持，整個CORS程序都是瀏覽器完成的，無需用戶參與，因此實作CORS的關鍵就是服務器，只要服務器實作了CORS請求，就可以跨源通信了，
2.JSONP
- jsonp的原理就是利用script標簽沒有跨域限制，通過script標簽src屬性，發送帶有callback引數的GET請求，服務端將介面回傳資料拼湊到callback函式中，回傳給瀏覽器，瀏覽器決議執行，從而前端拿到callback函式回傳的資料，
- 缺點：具有局限性， 僅支持get方法；不安全，可能會遭受XSS攻擊，
3.postMessage跨域
- 解決問題：
- 頁面和其打開的新視窗的資料傳遞
- 多視窗之間訊息傳遞
- 頁面與嵌套的iframe訊息傳遞
- 上面三個場景的跨域資料傳遞
- 用法：
- postMessage(data,origin)方法接受兩個引數
- data： html5規范支持任意基本型別或可復制的物件，但部分瀏覽器只支持字串，所以傳參時最好用JSON.stringify()序列化，
- origin： 協議+主機+埠號，也可以設定為"*"，表示可以傳遞給任意視窗，如果要指定和當前視窗同源的話設定為"/"，
4.nginx代理跨域
-
Nginx 是一款輕量級的 Web 服務器，也可以用于反向代理、負載平衡和 HTTP 快取等，Nginx 使用異步事件驅動的方法來處理請求，是一款面向性能設計的 HTTP 服務器，傳統的 Web 服務器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的，正是這個主要的區別帶給了 Nginx 在性能上的優勢，Nginx 架構的最頂層是一個 master process，這個 master process 用于產生其他的 worker process，這一點和Apache 非常像，但是 Nginx 的 worker process 可以同時處理大量的HTTP請求，而每個 Apache process 只能處理一個，
-
nginx代理跨域，實質和CORS跨域原理一樣，通過組態檔設定請求回應頭Access-Control-Allow-Origin…等欄位，
-
跨域問題：同源策略僅是針對瀏覽器的安全策略，服務器端呼叫HTTP介面只是使用HTTP協議，不需要同源策略，也就不存在跨域問題，
5.nodejs中間件代理跨域
- node中間件實作跨域代理，原理大致與nginx相同，都是通過啟一個代理服務器，實作資料的轉發，也可以通過設定cookieDomainRewrite引數修改回應頭中cookie中域名，實作當前域的cookie寫入，方便介面登錄認證，
6.document.domain + iframe跨域
- 此方案僅限主域相同，子域不同的跨域應用場景，實作原理：兩個頁面都通過js強制設定document.domain為基礎主域，就實作了同域，
7.location.hash + iframe跨域
- 實作原理：a欲與b跨域相互通信，通過中間頁c來實作， 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信，
8.window.name + iframe跨域
9.WebSocket協議跨域
- WebSocket protocol是HTML5一種新的協議，它實作了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實作，
三、正向代理與反向代理的區別
-
正向代理和反向代理的結構是一樣的，都是 client-proxy-server 的結構，它們主要的區別就在于中間這個 proxy 是哪一方設定的，在正向代理中，proxy 是 client 設定的，用來隱藏 client；而在反向代理中，proxy 是 server 設定的，用來隱藏 server，
-
正向代理：
-
客戶端想獲得一個服務器的資料，但是因為種種原因無法直接獲取，于是客戶端設定了一個代理服務器，并且指定目標服務器，之后代理服務器向目標服務器轉交請求并將獲得的內容發送給客戶端，這樣本質上起到了對真實服務器隱藏真實客戶端的目的，實作正向代理需要修改客戶端，比如修改瀏覽器配置，
-
-
反向代理：
-
服務器為了能夠將作業負載分不到多個服務器來提高網站性能 (負載均衡)等目的，當其受到請求后，會首先根據轉發規則來確定請求應該被轉發到哪個服務器上，然后將請求轉發到對應的真實服務器上，這樣本質上起到了對客戶端隱藏真實服務器的作用，一般使用反向代理后，需要通過修改 DNS 讓域名決議到代理服務器 IP，這時瀏覽器無法察覺到真正服務器的存在，當然也就不需要修改配置了，
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/518989.html
標籤：JavaScript