通過nginx反向代理解決前端訪問的跨域問題

paulquei 發布于2019-07-25 14:26 / 2532人閱讀

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。

一、問題背景說明：
編寫移動前端頁面時需要訪問后臺系統接口。前端項目在本地（個人辦公電腦）開發，后臺接口存放后生產的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題，如何在不改變后臺接口的情況下解決跨域問題？

二、同源/跨域概念說明：
同源策略：是瀏覽器的一種安全策略，所謂同源是指域名、協議、端口完全相同，只有同源的地址才可以相互通過ajax的方式請求。
跨域：同源或不同源說的是兩個地址之間的關系，不同源地址之間的請求我們稱之為跨域請求。

三、nginx反向代理解決的原理：

將nginx安裝在本地，然后將項目部署于nginx下，這樣訪問本地項目時用http://localhost/本地項目即可訪問。
然后配置nginx，通過反向代理的方式訪問后臺服務器，訪問后臺接口時使用http://localhost/后臺接口名稱即可跳轉到后臺服務器。
這樣瀏覽器之間的ajax請求完全滿足瀏覽器域名、協議、端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。

四、安裝和配置nginx
過程主要參考了以下兩篇文章，對原理的描述很清晰、完善：
nginx解決跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...

1）首先到nginx官網下載安裝包：http://nginx.org/en/download....
2）windows版本nginx使用方法簡要說明（cmd窗口下）：
幫助： nginx -h
啟動： start nginx
重載（nginx配置更新后可使用）：nginx -s reload
停止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web項目訪問路徑和反向代理：

    server {
        listen       80;              //nginx服務器啟動后的默認監聽端口，可按自身情況修改
        server_name  localhost;        //nginx服務器的名稱，

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        //以下是本地項目的部署配置：配置web服務器的根目錄訪問地址
        location / {
            root   myApp/mobile;
            index  index.html index.htm;
        }
        
        //以下是反向代理訪問遠程的后臺接口的配置
        location /remote-interface/{
        //下面是反向代理配置，通過nginx服務器訪問本地/remote-interface時，會將請求轉到后臺實際服務器去處理
            proxy_pass  http://remote-address/remote-interface/ ; 
        }

以上就是nginx本地項目部署和反向代理的配置。配置完成后，即可在項目中使用ajax請求訪問后臺接口。

五、發送ajax請求試驗
本地項目中的ajax請求的代碼示例如下，重點注意ajax請求的URL，要與nginx.conf的配置對應上：

var reqData = {             //post請求參數
                    "xxx":xxx,
            }

            $.post("/remote-interface/interface-name", reqData, function (data, status) {
                // console.log(arguments);
                if (status != "success") {     //post請求響應為失敗的處理
                    console.log(status);
                    return;
                }
            
            ///請求得到響應數據后的處理操作可寫在這里
               
            }, "json").error(function () {
                // console.log(arguments)
            });

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40091.html

通過nginx反向代理解決前端訪問的跨域問題

摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。一、問題背景說明：編寫移動前端頁面時需要訪問后臺系統接口。前端項目在本地（個人辦公電腦）開發，后臺接口存放后生產的后臺服務器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...

dongxiawu 2019-08-23 11:39 評論0 收藏0
前端常見跨域解決方案（全）

摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協議的一部分。什么是跨域？跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。廣義的跨域： 1.) 資源跳轉： A鏈接、重定向、表單提交 2.) 資源...

canger 2019-07-25 15:04 評論0 收藏0
徹底弄懂跨域問題

摘要：瀏覽器同源策略我們為何要研究跨域問題因為瀏覽器的同源策略規定某域下的客戶端在沒明確授權的情況下，不能讀寫另一個域的資源。跨域，老生常談的問題簡述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題，寫下這篇文章，希望對開發者們有所幫助。在讀本文前，希望您對以下知識略有了解。瀏覽器同源策略 n...

CoorChice 2019-08-23 14:41 評論0 收藏0
徹底弄懂跨域問題

摘要：用于告知瀏覽器可以將預先檢查請求返回結果緩存的時間，在緩存有效期內，瀏覽器會使用緩存的預先檢查結果判斷是否發送跨域請求。跨域，老生常談的問題簡述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題，寫下這篇文章，希望對開發者們有所幫助。在讀本文前，希望您對以下知識略有了解。瀏覽器同源策略 n...

rose 2019-07-25 14:36 評論0 收藏0
九種跨域方式實現原理（完整版）

摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。前言前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼一、什么是跨域？ 1.什么是同源策略及其限制內容？同源策略是一種約定，它是瀏覽器最核心...

edgardeng 2019-08-23 14:57 評論0 收藏0