iframe嵌套页面跨域问题nginx配置转发第三方服务

2024-11-04

Nginx反向代理解决iframe跨域问题

前言这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是http协议,后来升级了https,发现完全加载不出来.原因是浏览器的安全限制,在https协议下不允许有http的iframe请求.然而,除了交钱,也不能将麦克的协议变成https 前端无法解决这个问题,想了想,可以使用Nginx反向代理来实现.说白了,就是把自己的服务器当做代理服务器,骗过浏览器,

window.postMessage()实现(iframe嵌套页面)跨域消息传递

window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”).window.postMessage()提供了一个受控的机制相对来安全地规避这个限制. 发送消息的基本语法: targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow就是接

iframe嵌套页面跨域

父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 iframe中调用父级html中方法: parent.func(data1,data2...) 使用的前提条件是要在同域名下,想要如果域名不同,甚至端口不同,都会存在跨域的问题. 简单示例demo: a.html 页面 <html> <head> <meta http-equ

vue-cli3.0本地代理cookie跨域请求Nginx配置

由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Nginx配置如下: 一.vue-cli配置首先在vue.config.js中加入代理配置: devServer: { port: 3000, open: true, overlay: { warnings: false, errors: true

Nginx跨域及Https配置

一.跨域 1. 什么是跨域? 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制(指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的) 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 广义的跨域: 1.) 资源跳转:A链接.重定向

spring boot跨域请求访问配置以及spring security中配置失效的原理解析

一.同源策略同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源源[origin]就是协议.域名和端口号.例如:http://www.baidu.com:80这个URL. 什么是同源若地址里面的协议.域名和端口号均相同则属于同源. 是否是同源的判断例如判断下面的URL是否与 http://www.a.com/test/index.html 同源 http://www.a

vue-cli 3.0之跨域请求代理配置及axios路径配置

vue-cli 3.0之跨域请求代理配置及axios路径配置问题:在前后端分离的跨域请求中,报跨域问题配置: vue.config.js: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文件相对路径 devServer: { // open: process.platform === 'darwin', // host: 'localhost', port: 8071, // open: true, //配

easyui 中iframe嵌套页面，大弹窗自适应居中的解决方法。$('#win').window()

easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层遮罩显示*/ function wrapMaskShow(){ var maskTop = window.top.$("#mask-top");//外层遮罩 var maskLeft = window.top.$("#mask-left"); maskTop.show(); maskLeft.show(); $(

easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm

项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由于center区域是iframe嵌套的,所以里面的小弹窗无法覆盖页面的头部和左边目录栏. 情形一.点击提示弹窗里的确认后,提示弹窗消失: //warnTips为传入的值,例如successMask(“确定要删除选中的数据吗?”) function successMask(warnTips){ par

HTTPS请求HTTP接口被浏览器阻塞，python实现websocket客户端，websocket服务器，跨域问题，dwebsocket,https,拦截,服务端

HTTPS请求HTTP接口被浏览器阻塞,python实现websocket客户端,websocket服务器,跨域问题,dwebsocket,https,拦截,服务端发表时间:2020-03-05 1 背景由于公司前端的页面部署在以https(加了证书)协议的域名下,去请求http协议的域名的某个服务,并且该http域名下的服务,不仅要处理普通请求(POST.GET),还需要处理websocket请求.由于浏览器禁止https域名的内容请求http的服务,甚至嵌入子页面都禁止,因为浏览器会认为

nginx配置为windows服务中的坑

网上搜索“nginx 配置为windows服务”,很容易搜索到使用windows server warpper来配置,于是按照网上的方法我从github上的链接下载了1.17版本,前面都很顺利,很容易就配置成服务了,但就在启动服务的时候出异常了.错误大致如下 nginx: [alert] could not open error log file: CreateFile() " e:\nginx/logs/error.log" failed (123: The filename, di

使用Kubernetes中的Nginx来改善第三方服务的可靠性和延迟

使用Kubernetes中的Nginx来改善第三方服务的可靠性和延迟译自:How we improved third-party availability and latency with Nginx in Kubernetes 本文讨论了如何在Kubernetes中通过配置Nginx缓存来提升第三方服务访问的性能和稳定性.这种方式基于Nginx来实现,优点是不需要进行代码开发即可实现缓存第三方服务的访问,但同时也缺少一些定制化扩展.不支持缓存写操作,多个pod之间由于使用了集中式共享方式,因

搭建nginx代理，为前端页面跨域调用接口

前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用. 这里写一篇博客,记录一下. 前端页面地址为127.0.0.1:9813/a.html 接口地址http://test.cas.com/news/auth 让前端在他自己电脑安装好nginx后,在nginx.conf文件加入下面配置: server{ #任意一不在使用中的端口都行 listen 3389; server_name www.l.com; #/表示所有请求www.l.com都会进入如下处理 lo

Nginx跨域访问场景配置和防盗链

跨域访问控制跨域访问为什么浏览器禁止跨域访问不安全,容易出现CSRF攻击! 如果黑客控制的网站B在响应头里添加了让客户端去访问网站A的恶意信息,就会出现CSRF攻击 Nginx如何配置跨域访问 add_header语法 Syntax:add_header name value [always]; Default:— Context:http, server, location, if in location 语法解释: add_header name value [always]; nam

iframe中涉及父子页面跨域问题

什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http://a.123.com/index.html和http://a.123.com/index.js非跨域,它们有相同的域名,协议和端口. http://a.123.com/index.html和http://b.123.com/index.js跨域,相同的端口.协议,但是域名不同(a.123.com和b

页面跨域与iframe通信(Blocked a frame with origin)

项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面显然直接取不到iframe的值,因为这是跨域的(前台页面与后台页面不在同一个IP地址或者同一个端口),尝试访问会报错: Blocked a frame with origin "http://7.35.0.8:8080" from accessing a frame wit

iframe中子父页面跨域通讯

目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发送信息,其他页面要通过window.addEventListener()监听事件来接收信息: #跨域发送信息 #window.postMessage()语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow

nginx解决服务器宕机、解决跨域问题、配置防盗链、防止DDOS流量攻击

解决服务器宕机配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location / { proxy_connect_timeout 1; proxy_send_timeout 1; proxy_read_timeout 1; proxy_pass http://backserver; index index.html index.htm; } proxy_connect_timeout 1; :连接超时1秒 proxy_send_timeout 1; :请求超时1秒 pr

黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用i

跨域问题-nginx代理

有时候我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持.但有些浏览器是不支持的,所以这并非是最佳方案现在我们来利用nginx 通过反向代理满足浏览器的同源策略实现跨域通过服务端来模拟客户端请求,来达到设置头部信息的可能以QQ音乐为例子,QQ音乐不允许其他站点来访问此接口,所以就得模拟头部信息(referer.host),但是浏览器又禁止,咋办? 用代理 server { listen 8081; server_name localhost; #chars

使用 iframe + postMessage 实现跨域通信

在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. 语法: otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:其他窗口的引用,如

iframe嵌套页面跨域问题nginx配置转发第三方服务

热门专题