使用Iframe嵌套其他系统页面遇到的跨域问题

Posted 2022-06-23 唐宋xy

之前需要将一个其他的系统页面集成到现在主要使用的一个平台上，因为这个系统使用的是jsp的页面，另一个是augular的页面，并且为了保持项目的完整性和较小的改动，所以使用了iframe来将另一个页面集成进来。

1. 如何使用iframe嵌套页面
   使用frameset标签即可将其他的页面集成到这个当前的页面，这个frame标签的作用其实挺大的
   第一，可以防止页面刷新，将其他的一些刷新操作放到frame中，你在页面中看不到刷新，但是其实是刷新了页面。
   第二，可以将其他的页面直接通过链接就可以集成到当前页面，很方便。

用法：

<frameset cols="100%,*" rows="*" frameborder="NO" border="0" framespacing="0" onload="load()">
    <frame id="linkhtml" src="http://www.baidu.com" />
</frameset>

• frameset是父标签，不能省略，并且可以设置一些属性，用来设置大小的，如果不设置，那么可能你就看不见这个frame页面
• 注意： 这个onload函数，就是在页面刚打开的时候执行的函数，最好是在这个frameset上使用，虽然frame上也可以使用，但是会出现一只闪屏的情况。
• frame标签中的 src属性就是你需要链接的页面的地址了

2. 使用frame链接其他的系统遇到的跨域问题

   1> 在链接到其他的系统的页面的时候，会发送一个token过去，表明权限以及验证是否可以正常登录，所以需要发送一个请求，并且需要携带参数，所以就可以在这个onload()函数中发送请求，那么问题就来了，跨域，因为当前系统和需要集成的系统不是一个系统，所以如果发送请求就会涉及到跨域问题，这个自然也是比较好解决的，跨域的问题解决方案：

   1. ajax请求需要使用jsonp:

    $.ajax(
            type: "post",
            contentType:'application/json;charset=utf-8',
            url:"http://157.908.998.90:8080/login",
            data: JSON.stringify(params),
            datatype: "jsonp",
            success: function(data)
                            document.getElementById("linkHtml").setAttribute("src", "http://www.baidu.com");
            
        )
   

   使用jsonp就可以进行跨域请求

   2. 后端也需要做相应的修改：
      （1）如果是spring 4.2以上版本可以使用 @CorsOrigin注解如果是只是请求，则可以直接此注解，如果是和我一样跨域嵌套页面，使用下面的，后面会说为什么
      （2）后端代码：

      @Component
       public class SimpleCORSFilter implements Filter  
      
      
        @Override
        public void init(FilterConfig filterConfig) throws ServletException 
       
       @Override
       public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException 
           HttpServletResponse httpResponse = (HttpServletResponse) res;
           // 如果是cookie跨域，则需要设置为ajax请求服务器的ip或者域名，如果只是跨域访问，则设置为 * 即可
           httpResponse.setHeader("Access-Control-Allow-Origin", "https://123.980.98.90");
           httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE，OPTIONS");
           httpResponse.setHeader("Access-Control-Max-Age", "7200");
           httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
           httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
           chain.doFilter(req, httpResponse);
       
      
       @Override
       public void destroy() 
      
       
      
         ```
      
      

在web.xml中增加：配置filter

 <filter>
    <filter-name>cors</filter-name>
    <filter-class>spring.demo.controller.SimpleCORSFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

3. 如果只是跨域请求，则到此就可以实现功能了，不过如果你是需要登录到另一个系统，才可以看见的页面，那么还需要下面的步骤:
     因为如果是登录的话，那么一般来说，系统会将信息存储到session中，那么session会有一个JsessionId 存储在cookie中，所以，就出现了，虽然正常访问页面，正常登录，但是 就是没有权限访问里面的页面，会自动跳到登录页面。很奇怪，百思不得其解…
      看到页面其实是进去了，但是突然又弹出来，突然想到会不会是cookie没有跨域，导致里面的页面无法获取数据，认为是没有登录。
   最后经过尝试，果然是cookie需要设置跨域，才可以成功登录进去。
   因为登录之后，用户信息属于另一个系统，将JsessionId存储到cookie中，但是cookie是保存在当前浏览器，即当前系统页面，所以会出现无法将信息传递过去，不能看见里面的页面

所以设置cookie跨域的：
第一：

 			xhrFields: 
                withCredentials: true
            ,
            crossDomain: true,

只需要在刚才的ajax方法中加上这两个就可以。设置cookie跨域

第二：
需要在设置跨域的filter中加上：
httpResponse.setHeader("Access-Control-Allow-Origin", "https://123.980.98.90");
原本是*，那么现在需要指定为对应的ip，就是发送ajax请求的ip。
不能使用* ,因为服务端需要知道你哪的cookie才可以

设置后，就可以正常访问。