Nginx反向代理解決iframe跨域問題

前言

　這幾天有個需求：做個表單頁面，要求后台人員能自定義發布表單，用戶來填寫表單。我一想，這不麥克表單有現成的嗎，拿來就用！發布表單后，可以選擇使用iframe方式嵌入網站，一切順利。

   

          

　當時的網站是http協議，后來升級了https，發現完全加載不出來。原因是瀏覽器的安全限制，在https協議下不允許有http的iframe請求。然而，除了交錢，也不能將麥克的協議變成https

　前端無法解決這個問題，想了想，可以使用Nginx反向代理來實現。說白了，就是把自己的服務器當做代理服務器，騙過瀏覽器，讓它以為是向自己的服務器發請求。

正文

　目標網址：http://www-smcic-cn.mikecrm.com/i0RPpTH

　代理網址：https://www.smcic.cn/mikecrm/

　首先，將前端的iframe src屬性地址改成自己的

<iframe src="https:www.smcic.cn/mikecrm/"></iframe>

　接下來是Nginx配置，需要將以下代碼寫在https的server中：

location /mikecrm/ {
    proxy_pass http://www-smcic-cn.mikecrm.com/i0RPpTH;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
}

　試了試，確實能加載iframe。但是，iframe中有大量的css、js、img等資源要請求，並沒有通過以上配置代理，結果全部返回404，很是苦惱。

　通過分析資源請求路徑，發現是這樣的，例如 http://www-smcic-cn.mikecrm.com/css/... 或 http://www-smcic-cn.mikecrm.com/form/.../......

    

　邏輯並不難，奈何本人正則水平太差，在經歷了痛苦的嘗試之后，終於摸索出了一條道路：

resolver 223.5.5.5 119.29.29.29 114.114.114.114;  # 域名解析，要寫在server外面

location /mikecrm/ {
    set $flag 0;
    if ( $request_uri = "/mikecrm/" ) 
    {
        set $para "i0RPpTH";
    }
    if ( $request_uri != "/mikecrm/" )
    {
        set $flag "${flag}1";
    }
    if ( $request_uri ~ /mikecrm/(.*) )
    {
        set $paaa $1;
        set $flag "${flag}2";
    }
    if ( $flag = "012" )
    {
        set $para $paaa;
    }
    proxy_pass http://www-smcic-cn.mikecrm.com/$para;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
}

　注意及解釋：

　　　1.在代理地址proxy_pass中如果存在變量（$para），必須要使用resolver指令解析變量中的域名，因為Nginx一開始就會解析好域名。（其實是變量涉及到域名才需要用resolver，我這里沒涉及到域名，想不通為什么也必須要resolver）。推薦使用多個dns解析地址，最好是國內的。

　　　2.Nginx中不支持if else，也不支持條件嵌套，如果有條件判斷與的需求，可以參照后三個if{}的配合使用

　　　3.proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 可記錄真實的用戶訪問IP

　　　4.大概思路是，先判斷請求uri，如果是第一次請求（即/mikecrm/,請求iframe頁面）則轉向訪問http://www-smcic-cn.mikecrm.com/i0RPpTH，如果不是第一次請求（即/mikecrm/.../.....,請求資源）則轉向訪問資源。

優化

　雖然取得階段性成功，但此配置只能適用於特定的這個表單，要多個表單都能夠使用，還需要再改配置

　前端請求地址：

https://www.smcic.cn/mikecrm/i0RPpTH/

　Nginx配置：

location /mikecrm/ {
    set $flag 0;
    if ( $request_uri ~ ^/mikecrm/(\w*)/$ )
    {
        set $mikeid $1;
    }
    if ( $request_uri = /mikecrm/$mikeid/ )
    {
        set $para $mikeid;
    }
    if ( $request_uri != /mikecrm/$mikeid/ )
    {
        set $flag "${flag}1";
    }
    if ( $request_uri ~ ^/mikecrm/(\w*)/(.*) )
    {
        set $paaa $2;
        set $flag "${flag}2";
    }
    
    if ( $flag = "012" )
    {
        set $para $paaa;
    }
    proxy_pass http://www-smcic-cn.mikecrm.com/$para;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
}

　參考文檔：

　　1.https://www.cnblogs.com/taosim/articles/4097728.html

　　2.https://blog.csdn.net/u014296316/article/details/80973530

　　3.https://www.cnblogs.com/netsa/p/6383094.html

　　4.https://segmentfault.com/a/1190000002797606#articleHeader6

　　5.http://www.udpwork.com/item/12552.html

　　6.https://www.cnblogs.com/wangzhisdu/p/7837726.html