跨域問(wèn)題，解決之道

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了雨花臺(tái)免費(fèi)建站歡迎大家使用！

跨域問(wèn)題，在日常開(kāi)發(fā)過(guò)程中，是一個(gè)非常熟悉的名詞。今天的話題，結(jié)合我之前的項(xiàng)目場(chǎng)景，討論下《跨域問(wèn)題，解決之道》。

跨域是什么

跨域問(wèn)題，是由于JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。換句話說(shuō)，只有JavaScript存在跨域問(wèn)題。

什么情況下會(huì)出現(xiàn)跨域

不同源訪問(wèn)，就算是跨域了喲。那什么才算同源呢？一般來(lái)說(shuō)，同源，即同一來(lái)源，包括主機(jī)名、協(xié)議和端口號(hào)。

例如，

http://blog.720ui.com 和 http://docs.720ui.com ，是不同的二級(jí)域名，存在跨域問(wèn)題。

http://blog.720ui.com 和 https://blog.720ui.com , 是不同的協(xié)議，存在跨域問(wèn)題

http://blog.720ui.com 和 http://blog.720ui.com:4000 , 是不同的端口號(hào)，存在跨域問(wèn)題。

http://blog.720ui.com/java/ 和 http://blog.720ui.com/about/, 雖然文件夾不同，但是是相同域名下，所以不存在跨域問(wèn)題。

跨域問(wèn)題普遍么

在現(xiàn)在前后端分離，微服務(wù)化之后，往往我們就存在許多不同的域名，這種情況下，就存在非常普遍的跨域問(wèn)題。因此，跨域問(wèn)題，在日常開(kāi)發(fā)過(guò)程中，是一個(gè)非常熟悉的名詞。那么，我們是如何去解決跨域問(wèn)題呢？

解決之道

我們是如何去解決跨域問(wèn)題呢？來(lái)吧，我們進(jìn)入正題。

方案一，JSONP（廢棄）

很早很早之前，我有個(gè)項(xiàng)目曾經(jīng)使用過(guò)JSONP處理跨域問(wèn)題。簡(jiǎn)單的理解，jsonp是帶有回調(diào)函數(shù)callback的json，它是一個(gè)很棒的方案，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。但是，JSONP方案的局限性在于，JSONP只能實(shí)現(xiàn)GET請(qǐng)求。隨著現(xiàn)在RESTful的興起，JSONP顯得力不從心了。因?yàn)?，RESTful不僅有GET，還存在POST、PUT、PATCH、DELETE。

方案二，CORS（常用）

CORS 全稱為 Cross Origin Resource Sharing（跨域資源共享）。整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，但用戶不會(huì)有感覺(jué)。因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)端。服務(wù)端只需添加相關(guān)響應(yīng)頭信息，即可實(shí)現(xiàn)客戶端發(fā)出 AJAX 跨域請(qǐng)求。

值得注意的是，瀏覽器必須先以 OPTIONS 請(qǐng)求方式發(fā)送一個(gè)預(yù)請(qǐng)求，從而獲知服務(wù)器端對(duì)跨源請(qǐng)求所支持 HTTP 方法。在確認(rèn)服務(wù)器允許該跨源請(qǐng)求的情況下，以實(shí)際的 HTTP 請(qǐng)求方法發(fā)送那個(gè)真正的請(qǐng)求。

我們絕大多數(shù)項(xiàng)目采取這個(gè)方案，實(shí)現(xiàn)細(xì)節(jié)，不再擴(kuò)展，如果有疑問(wèn)，可以關(guān)注公眾號(hào)私信，或者評(píng)論留言喲。

但是，不幸的是，CORS不支持IE8、IE9，如果產(chǎn)品不再考慮兼容IE低版本的話，可以忽略，但是如果產(chǎn)品需要兼容目前國(guó)內(nèi)還存在大量低版本的IE市場(chǎng)（百分之二十多），那么這個(gè)需要慎重考慮咯。

附圖，留念。

跨域問(wèn)題，解決方案-Nginx反向代理

方案三，搭建中間轉(zhuǎn)發(fā)層（常用）

跨域問(wèn)題的核心是什么？不同源訪問(wèn)。是啊，如果我們轉(zhuǎn)換成同源請(qǐng)求，就不存在這個(gè)問(wèn)題啦。

因此，我們之前有個(gè)項(xiàng)目，通過(guò)搭建中間層，當(dāng)然可以是java，也可以是node.js，通過(guò)將服務(wù)端的請(qǐng)求進(jìn)行轉(zhuǎn)發(fā)，換句話說(shuō)，就是dispatcher了一層，那么前端請(qǐng)求的地址，就被轉(zhuǎn)發(fā)了，所以很好的解決跨域問(wèn)題。

當(dāng)然，如果對(duì)性能有考量的產(chǎn)品，就需要慎重選擇這個(gè)方案咯，因?yàn)槎嗔艘粚又虚g轉(zhuǎn)發(fā)，不管是網(wǎng)絡(luò)開(kāi)銷，還是性能負(fù)載都是有一定的影響。

方案四，Nginx反向代理（常用）

首先，產(chǎn)品需要搭建一個(gè)中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請(qǐng)求。當(dāng)然，我們都是基于Nginx作為反向代理，所以當(dāng)然是水到渠成。

那么，Nginx的思路，就是通過(guò)Nginx解析URL地址的時(shí)候進(jìn)行判斷，將請(qǐng)求轉(zhuǎn)發(fā)的具體的服務(wù)器上。

說(shuō)個(gè)思路，可能有點(diǎn)暈，我畫(huà)個(gè)圖，大家就理解了。

跨域問(wèn)題，解決方案-Nginx反向代理

當(dāng)用戶請(qǐng)求xx.720ui.com/server1的時(shí)候，Nginx會(huì)將請(qǐng)求轉(zhuǎn)發(fā)給Server1這個(gè)服務(wù)器上的具體應(yīng)用，從而達(dá)到跨域的目的。

總結(jié)

跨域問(wèn)題，在日常開(kāi)發(fā)過(guò)程中，是一個(gè)非常熟悉的名詞。我們?cè)陂_(kāi)發(fā)過(guò)程中，或多或少都與它打過(guò)交道，因此，今天的話題，結(jié)合我之前的項(xiàng)目場(chǎng)景，以及JSONP、CORS、中間轉(zhuǎn)發(fā)層、Nginx反向代理四個(gè)方案進(jìn)行總結(jié)，討論下《跨域問(wèn)題，解決之道》。

解決思路

跨域問(wèn)題，是由于JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。如果，我們將不同的域名整合到一個(gè)域，換句話說(shuō)，通過(guò)子目錄的方式劃分，是不是就能解決跨域問(wèn)題呢？那么，Nginx反向代理的思路，就是通過(guò)Nginx解析URL地址的時(shí)候進(jìn)行判斷，將請(qǐng)求轉(zhuǎn)發(fā)的具體的服務(wù)器上。

解決跨域問(wèn)題

自定義本地的url請(qǐng)求規(guī)則 ，如 http://www.720ui.com/blog 則對(duì)應(yīng)要nginx服務(wù)轉(zhuǎn)發(fā)到http://blog.720ui.com 。

配置 nginx.conf 文件，將本地帶有特定前綴的URL接口請(qǐng)求轉(zhuǎn)發(fā)到要跨域的真實(shí)物理服務(wù)器上。

Nginx服務(wù)轉(zhuǎn)發(fā)請(qǐng)求到真實(shí)物理服務(wù)器。Nginx服務(wù)將真實(shí)物理服務(wù)器傳回的數(shù)據(jù)轉(zhuǎn)發(fā)給web端。

點(diǎn)擊獲取?附送學(xué)習(xí)進(jìn)階架構(gòu)資料、PDF書(shū)籍文檔、面試資料

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：跨域問(wèn)題，解決方案-Nginx反向代理-創(chuàng)新互聯(lián)
文章來(lái)源：http://m.newbst.com/article16/dehhgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)