Nginx反向代理解决iframe跨域问题

前言

这几天有个需求：做个表单页面，要求后台人员能自定义发布表单，用户来填写表单。我一想，这不麦克表单有现成的吗，拿来就用！发布表单后，可以选择使用iframe方式嵌入网站，一切顺利。

当时的网站是http协议，后来升级了https，发现完全加载不出来。原因是浏览器的安全限制，在https协议下不允许有http的iframe请求。然而，除了交钱，也不能将麦克的协议变成htt

前端无法解决这个问题，想了想，可以使用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