iframe下系统访问跨域问题解决办法

问题描述：iframe下嵌入web页面，访问后端接口跨域，导致接口调不通。

产生原因：iframe下，web端访问后端接口时，会优先向后端发送请求方法为OPTIONS的预检测请求，该请求调用不通，导致真实接口请求跨域无法访问。

解决办法：web端配置nginx增加隐藏iframe下跨域参数，同时针对OPTIONS方法的请求，设置请求头，其中'Access-Control-Allow-Headers'需要包含项目前后端交互使用到的鉴权字段如Authorization，Customip，允许跨域。如下所示:

(1)静态资源请求代理配置，增加黄颜色标记部分内容。

location / {
            try_files $uri $uri/ /index.html;
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, PUT, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,authorization,Customip,customip,Accesstoken,accesstoken';
           
        # 处理预检请求
            if ($request_method = 'OPTIONS') {
                 return 204;
            }    
        }

(2)后端接口代理，，增加黄颜色标记部分内容。

location /api {
            default_type application/json;
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, PUT, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,authorization,Customip,customip,Accesstoken,accesstoken';
           
        # 处理预检请求
            if ($request_method = 'OPTIONS') {
                 return 204;
            }    
           proxy_pass http://ip:port;
           proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "Upgrade";
           rewrite "^/api/(.*)$" /$1 break;
        }

(3)跨域访问其他服务接口，增加黄颜色标记部分内容。

location /api/yyjc {
           default_type application/json;
           proxy_pass http://ip:port;

            add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, PUT, POST, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,authorization,Customip,customip,Accesstoken,accesstoken';
           #add_header 'Access-Control-Allow-Credentials' 'true';

          #iframe 下跨域设置

           proxy_hide_header X-Frame-Options;
           add_header X-Frame-Options 'ALLOWALL';
           
           if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, PUT, POST, DELETE';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,authorization,Customip,customip,Accesstoken,accesstoken';
            
               return 204;
           }
           rewrite "^/api/yyjc(.*)$" $1 break;
    }