当前位置：首页 > news >正文

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

news 来源：原创 2025/4/22 12:54:08

问题描述：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;
   }