跨域問題，解決方案-Nginx反向代理

時間 2019-11-12

標籤問題解決方案 nginx 反向代理欄目 Nginx 简体版

原文原文鏈接

跨域問題，解決之道前端

跨域問題，在平常開發過程當中，是一個很是熟悉的名詞。今天的話題，結合我以前的項目場景，討論下《跨域問題，解決之道》。java

跨域是什麼node

跨域問題，是因爲JavaScript出於安全方面的考慮，不容許跨域調用其餘頁面的對象。換句話說，只有JavaScript存在跨域問題。nginx

什麼狀況下會出現跨域web

不一樣源訪問，就算是跨域了喲。那什麼纔算同源呢？通常來講，同源，即同一來源，包括主機名、協議和端口號。json

例如，後端

http://blog.720ui.com 和 http://docs.720ui.com ，是不一樣的二級域名，存在跨域問題。設計模式

http://blog.720ui.com 和 https://blog.720ui.com , 是不一樣的協議，存在跨域問題跨域

http://blog.720ui.com 和 http://blog.720ui.com:4000 , 是不一樣的端口號，存在跨域問題。瀏覽器

http://blog.720ui.com/java/ 和 http://blog.720ui.com/about/, 雖然文件夾不一樣，可是是相同域名下，因此不存在跨域問題。

跨域問題廣泛麼

在如今先後端分離，微服務化以後，每每咱們就存在許多不一樣的域名，這種狀況下，就存在很是廣泛的跨域問題。所以，跨域問題，在平常開發過程當中，是一個很是熟悉的名詞。那麼，咱們是如何去解決跨域問題呢？

解決之道

咱們是如何去解決跨域問題呢？來吧，咱們進入正題。

方案一，JSONP（廢棄）

很早很早以前，我有個項目曾經使用過JSONP處理跨域問題。簡單的理解，jsonp是帶有回調函數callback的json，它是一個很棒的方案，可用於解決主流瀏覽器的跨域數據訪問的問題。可是，JSONP方案的侷限性在於，JSONP只能實現GET請求。隨着如今RESTful的興起，JSONP顯得力不從心了。由於，RESTful不只有GET，還存在POST、PUT、PATCH、DELETE。

方案二，CORS（經常使用）

CORS 全稱爲 Cross Origin Resource Sharing（跨域資源共享）。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，但用戶不會有感受。所以，實現CORS通訊的關鍵是服務端。服務端只需添加相關響應頭信息，便可實現客戶端發出 AJAX 跨域請求。

值得注意的是，瀏覽器必須先以 OPTIONS 請求方式發送一個預請求，從而獲知服務器端對跨源請求所支持 HTTP 方法。在確認服務器容許該跨源請求的狀況下，以實際的 HTTP 請求方法發送那個真正的請求。

咱們絕大多數項目採起這個方案，實現細節，再也不擴展，若是有疑問，能夠關注公衆號私信，或者評論留言喲。

可是，不幸的是，CORS不支持IE八、IE9，若是產品再也不考慮兼容IE低版本的話，能夠忽略，可是若是產品須要兼容目前國內還存在大量低版本的IE市場（百分之二十多），那麼這個須要慎重考慮咯。

附圖，留念。