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

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

如何使用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属性就是你需要链接的页面的地址了

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

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

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就可以进行跨域请求

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

@Componentpublic class SimpleCORSFilter implements Filter  {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic 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);}@Overridepublic 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>

如果只是跨域请求，则到此就可以实现功能了，不过如果你是需要登录到另一个系统，才可以看见的页面，那么还需要下面的步骤:
因为如果是登录的话，那么一般来说，系统会将信息存储到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才可以

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

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

iframe嵌套其它网站页面详解
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...
html页面怎么解决跨域问题,前端web开发html如何避免js的跨域访问
今天开发几个页面,但是页面中调用了线上的一些http接口进行渲染页面,因为跨域问题,但是又不想弄成jsonp方式,因此弄个apache http server来折腾.这个只适用于linux 1.从ap ...
iframe嵌套其它网站页面及相关知识点详解
在开发过程中会遇到需要在一个页面中嵌套另外一个页面,就要使用到框架标签,然后指定src就可以了. 基本语法: <iframe src="需要展示的网站页面的URL"> ...
iframe嵌套显示整个页面_【HTML】框架标签lt;iframegt;
说明通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 格式语法: 注:该URL指向不同的网页. height 和 width 属性用来定义iframe标签的高度与宽度.属性默认以像素为单位 ...
html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题
概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
cefSharp通过js操控页面，含跨域操控
基本操控 cefSharp可以让页面运行指定的js代码,所以这就为操控页面提供了方法,js能做的所有操控DOM元素的方法,cefSharp都可以做了在67版本中对页面使用js的方法很简单,一句话: ...
frame页面地址转向跨域解决方法
mainFrame.htm下有两个iframe,左边是left.aspx,frame名是leftFrame,右边名是是mainFrame left.aspx包含了很多的连接,linka和linkc连到 ...
webqq的注册登记和聊天页面--运用jsonp跨域
简介: 我们知道,ajax用于数据交互,但它不能跨域,跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求 http://www.google. ...
iframe嵌套其它网站页面全屏设置
今天在使用iframe时,发现嵌套页面中有个[全屏]功能,不好使,查了一下,发现iframe还有1个属性allowfullscreen设置,可以设置是否支持全屏,默认是false,现在把iframe的 ...

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

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

最新文章

热门文章