一、同源政策

• 跨域問題其實(shí)就是瀏覽器的同源策略造成的。同源策略限制了從同一個(gè)源加載的文檔或腳本如何與另一個(gè)源的資源進(jìn)行交互。這是瀏覽器的一個(gè)用于隔離潛在惡意文件的重要的安全機(jī)制。同源指的是：協(xié)議、端口號(hào)、域名必須一致。同源策略：protocol（協(xié)議）、domain（域名）、port（端口）三者必須一致。同源政策的目的主要是為了保證用戶的信息安全，它只是對(duì) js 腳本的一種限制，并不是對(duì)瀏覽器的限制，對(duì)于一般的 img、或者script 腳本請(qǐng)求都不會(huì)有跨域的限制，這是因?yàn)檫@些操作都不會(huì)通過響應(yīng)結(jié)果來進(jìn)行可能出現(xiàn)安全問題的操作。同源政策主要限制了三個(gè)方面。
  • 當(dāng)前域下的 js 腳本不能夠訪問其他域下的 cookie、LocalStorage、SessionStorage 和 indexDB。
  • 當(dāng)前域下的 js 腳本不能夠操作訪問操作其他域下的 DOM。
  • 當(dāng)前域下 ajax 無法發(fā)送跨域請(qǐng)求。

二、解決跨域問題方法

1.CORS

• 跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain)上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域HTTP 請(qǐng)求。CORS需要瀏覽器和服務(wù)器同時(shí)支持，整個(gè)CORS過程都是瀏覽器完成的，無需用戶參與。因此實(shí)現(xiàn)CORS的關(guān)鍵就是服務(wù)器，只要服務(wù)器實(shí)現(xiàn)了CORS請(qǐng)求，就可以跨源通信了。

2.JSONP

• jsonp的原理就是利用script標(biāo)簽沒有跨域限制，通過script標(biāo)簽src屬性，發(fā)送帶有callback參數(shù)的GET請(qǐng)求，服務(wù)端將接口返回?cái)?shù)據(jù)拼湊到callback函數(shù)中，返回給瀏覽器，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)。
• 缺點(diǎn)：具有局限性， 僅支持get方法；不安全，可能會(huì)遭受XSS攻擊。

3.postMessage跨域

• 解決問題：
  • 頁面和其打開的新窗口的數(shù)據(jù)傳遞
  • 多窗口之間消息傳遞
  • 頁面與嵌套的iframe消息傳遞
  • 上面三個(gè)場(chǎng)景的跨域數(shù)據(jù)傳遞
• 用法：
  • postMessage(data,origin)方法接受兩個(gè)參數(shù)
  • data： html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。
  • origin： 協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

4.nginx代理跨域

• Nginx 是一款輕量級(jí)的 Web 服務(wù)器，也可以用于反向代理、負(fù)載平衡和 HTTP 緩存等。Nginx 使用異步事件驅(qū)動(dòng)的方法來處理請(qǐng)求，是一款面向性能設(shè)計(jì)的 HTTP 服務(wù)器。傳統(tǒng)的 Web 服務(wù)器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的。正是這個(gè)主要的區(qū)別帶給了 Nginx 在性能上的優(yōu)勢(shì)。Nginx 架構(gòu)的最頂層是一個(gè) master process，這個(gè) master process 用于產(chǎn)生其他的 worker process，這一點(diǎn)和Apache 非常像，但是 Nginx 的 worker process 可以同時(shí)處理大量的HTTP請(qǐng)求，而每個(gè) Apache process 只能處理一個(gè)。

  

  十載的會(huì)澤網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整會(huì)澤建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“會(huì)澤網(wǎng)站設(shè)計(jì)”,“會(huì)澤網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

• nginx代理跨域，實(shí)質(zhì)和CORS跨域原理一樣，通過配置文件設(shè)置請(qǐng)求響應(yīng)頭Access-Control-Allow-Origin…等字段。

• 跨域問題：同源策略僅是針對(duì)瀏覽器的安全策略。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不需要同源策略，也就不存在跨域問題。

5.nodejs中間件代理跨域

• node中間件實(shí)現(xiàn)跨域代理，原理大致與nginx相同，都是通過啟一個(gè)代理服務(wù)器，實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)，也可以通過設(shè)置cookieDomainRewrite參數(shù)修改響應(yīng)頭中cookie中域名，實(shí)現(xiàn)當(dāng)前域的cookie寫入，方便接口登錄認(rèn)證。

6.document.domain + iframe跨域

• 此方案僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景。實(shí)現(xiàn)原理：兩個(gè)頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

7.location.hash + iframe跨域

• 實(shí)現(xiàn)原理：a欲與b跨域相互通信，通過中間頁c來實(shí)現(xiàn)。 三個(gè)頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。

8.window.name + iframe跨域

9.WebSocket協(xié)議跨域

• WebSocket protocol是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)。

三、正向代理與反向代理的區(qū)別

• 正向代理和反向代理的結(jié)構(gòu)是一樣的，都是 client-proxy-server 的結(jié)構(gòu)，它們主要的區(qū)別就在于中間這個(gè) proxy 是哪一方設(shè)置的。在正向代理中，proxy 是 client 設(shè)置的，用來隱藏 client；而在反向代理中，proxy 是 server 設(shè)置的，用來隱藏 server。

• 正向代理：

  • 客戶端想獲得一個(gè)服務(wù)器的數(shù)據(jù)，但是因?yàn)榉N種原因無法直接獲取。于是客戶端設(shè)置了一個(gè)代理服務(wù)器，并且指定目標(biāo)服務(wù)器，之后代理服務(wù)器向目標(biāo)服務(wù)器轉(zhuǎn)交請(qǐng)求并將獲得的內(nèi)容發(fā)送給客戶端。這樣本質(zhì)上起到了對(duì)真實(shí)服務(wù)器隱藏真實(shí)客戶端的目的。實(shí)現(xiàn)正向代理需要修改客戶端，比如修改瀏覽器配置。

• 反向代理：

  • 服務(wù)器為了能夠?qū)⒐ぷ髫?fù)載分不到多個(gè)服務(wù)器來提高網(wǎng)站性能 (負(fù)載均衡)等目的，當(dāng)其受到請(qǐng)求后，會(huì)首先根據(jù)轉(zhuǎn)發(fā)規(guī)則來確定請(qǐng)求應(yīng)該被轉(zhuǎn)發(fā)到哪個(gè)服務(wù)器上，然后將請(qǐng)求轉(zhuǎn)發(fā)到對(duì)應(yīng)的真實(shí)服務(wù)器上。這樣本質(zhì)上起到了對(duì)客戶端隱藏真實(shí)服務(wù)器的作用。一般使用反向代理后，需要通過修改 DNS 讓域名解析到代理服務(wù)器 IP，這時(shí)瀏覽器無法察覺到真正服務(wù)器的存在，當(dāng)然也就不需要修改配置了。