nginx 代理突破iframe跨域限制A域名的网页中想要嵌入B域名的网页。 1.如果你能够修改子窗口请求服务器B的配置

需求

A域名的网页中想要嵌入B域名的网页。

跨域限制问题

iframe窗口请求的资源（即B域名中的页面），受浏览器同源策略限制（安全起见），不允许放在iframe里：

解决办法

两种：

1.如果你能够修改子窗口请求服务器B的配置，可以设置iframe源域名服务器B响应头x-frame-options，设置为允许某个的域名例如A通过（具体设置可以参考MDN）。配置B取消其跨域限制，让其可以不受限制的被嵌入到其他网页中。

2.如果不能修改子窗口请求服务器B的配置，那就写一个代理服务器C（很简单，转发请求即可,比如采用nginx进行转发），配置C不限制它被A通过iframe引入（x-frame-options），然后A里的网页就可用iframe访问你的代理服务器C了 (C和A如果是同一个，那么就是同一个域，就不用操心跨域了)。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>iframe</title>
  </head>
  <body>
    <iframe src="https://www.baidu.com/" frameborder="0"></iframe>
    <iframe
      src="http://localhost:8080/file-in-iframe/web/entry/entry.html"
      frameborder="0"
    ></iframe>
  </body>
</html>

nginx.conf里的配置：

request-in-iframe的代理保证了子页面里的所有请求可以被成功转发，不受跨域限制；

file-in-iframe的代理保证了子页面所有的静态资源可以被成功转发，不受跨域限制。

location  /request-in-iframe {
    proxy_pass      http://目标服务器.com/request-in-iframe;
    #proxy_set_header X-Real-IP $remote_addr;
    #proxy_set_header X-Forwarded-For $remote_addr;
    #proxy_set_header Host $host;
    #proxy_headers_hash_max_size 51200;
}
location  /file-in-iframe {
    proxy_pass      http://目标服务器.com/file-in-iframe;
    #proxy_set_header X-Real-IP $remote_addr;
    #proxy_set_header X-Forwarded-For $remote_addr;
    #proxy_set_header Host $host;
    #proxy_headers_hash_max_size 51200;
}

reference

reference： www.cnblogs.com/V587Chinese…