同一web系统,不同端口的跨域问题

部署web系统的时候,发现了跨域问题,子系统是用Iframe嵌入到系统里面的,导致父窗口获取子系统的webService和图片时发现跨域问题,如下图所示:
问题1:父窗口获取子系统的对象跨域

原因:用这个方式直接传递参数会涉及到跨域问题

父窗体传递参数:

window.MonitorStationInfo.ID= selectedRow.ID;//父窗体传递参数

子窗体获取参数:

var pointid=window.parent.parent.MonitorStationInfo.ID//子窗体获取参数

解决办法:使用Cookie传递参数

父窗体传递参数:

document.cookie = "pointid=" + escape(row.MonitorID);//父窗体通过Cookie保存参数

子窗体获取参数:

  var arr = document.cookie.match(new RegExp("(^|)pointid=([^;]*)(;|$)"));
  var pointid = unescape(arr[2]);//子窗体获取父页面通过Cookie传递过来的参数

问题2:在父窗体显示子系统来源的图片跨域


再点击子窗口里面的图片时,会在父窗口弹出放大的图片,如下图所示:

点击前:

点击后

实际效果:

原因:

在使用jquery动态加载放大的图片时,我是使用系统顶层的document(top.document)来操作dom的

这样会在父窗体显示放大的图片导致跨域

解决办法:

让放大的图片在子系统中显示:在使用jquery动态加载放大的图片时,使用子系统的document(window.parent.document)来操作dom的

时间: 2024-09-06 09:08:10

同一web系统,不同端口的跨域问题的相关文章

基于JWT的web api身份验证及跨域调用实践

随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的做法有所不同,除了面临跨域提交cookie的烦人问题外,更重要的是,有些终端可能根本不支持cookie. Json Web Token(jwt)是一种不错的身份验证及授权方案,简单的说就是调用端调用api时,附带上一个由api端颁发的token,以此来验证调用者的授权信息.但由于时间关系,不对jwt

Web安全技术(3)-浏览器的跨域访问

http://www.blogjava.net/linli/archive/2015/04/22/424584.html 一.浏览器介绍 对于Web应用来说,浏览器是最重要的客户端. 目前浏览器五花八门多得不得了,除了Chrome.IE.Firefox.Safari.Opera这些国外的浏览器外,百度.腾讯.360.淘宝.搜狗.傲游之类的,反正能做的都做了. 浏览器虽然这么多,但浏览器内核主要就以下4种: Trident:IE使用的内核. Gecko:Firefox使用的内核. WebKit:S

Web Api 2(Cors)Ajax跨域访问

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,

浅谈Web Api配合SignalR的跨域支持

最近接手的一个项目中,涉及到一个简单的消息模块,由于之前有简单了解过SignalR,所以打算尝试着摸索摸索~! 首先,通过Nuget管理器添加Microsoft ASP.NET SignalR引用~目前最新版本2.2.0,依赖项目也有点多,什么Microsoft.AspNet.SignalR.JS,Microsoft.AspNet.SignalR.SystemWeb,还有Owin相关的项目,没法咯,一起统一引用! 添加启动设置 1 [assembly: OwinStartup(typeof(Si

angularjs 控制器不能访问nodejs 3000端口,跨域访问

目前做的一个项目,前端采用的是angularjs,后端nodejs做服务器. 我尝试使用接下里的方式来发起对nodejs服务器的请求: <span style="font-family:SimHei;font-size:18px;"> $http.get('http://localhost:3000/') .success(function (data) { $scope.index = data; }) .error(function (data) { $scope.in

web api 解决跨域的问题

web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers"

在ABP的Web层中实现复杂请求跨域访问

在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在做一个留言的验证码时,使用了Session验证的方式,所以将验证码请求与校验功能放在了Web层.由于测试阶段前后端不同域,涉及到跨域请求的问题.跨域问题可以通过代理等手段解决,但是也可以在后端做些简单的修改来进行实现.WebApi的跨域处理比较简单,有官方给出的解决方案.但是Web层一般不涉及跨域,所以自己进行了探索实现. 一.常见方案 在web.con

ASP.NET Core Web API 跨域(CORS) Cookie问题

身为一个Web API,处理来自跨域不同源的请求,是一件十分合理的事情. 先上已有的文章,快速复制粘贴,启用CORS: Microsoft:启用 ASP.NET Core 中的跨域请求 (CORS) ASP.NET Core 配置跨域(CORS) 如果按照以上文章,一步一步操作,你会发现,虽然能跨域请求了,但是即使客户端开了(xhr.withCredentials = true)也无法将Cookie发送给API. 关于AllowAnyOrigin 这是因为请求的首部中携带了 Cookie 信息,

No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource——Web Api跨域问题

最近使用C#写了一个简单的web api项目,在使用项目中的.cshtml文档测试的时候没有任何问题,但是在外部HBuilder上面编写.html通过Ajax调用web api路径时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. 导致这个问题的原因是在跨域访问web api的api时,C#自带的web api并不能支持跨域访问,如果需要,可以更改配置来实现. 1.更改Web.con