nginx反向代码解决跨域访问(nginx 解决跨域问题嵌入第三方页面)
nginx反向代码解决跨域访问
nginx 解决跨域问题嵌入第三方页面目录
- 前言
- 困难
- 跨域定义
- nginx 的特性
- 反向代理
- 动静分离
- 尝试实现
- 最终效果
- 题外话
我们自己的系统需要加载第三方系统中的一部分组件。计划的是第三方开发、提供相关接口,我们通过接口获取到数据,然后,再用这些数据在我们系统中吧相关的功能实现了
可惜的是,领导没有协调下来。正规的途径搞不定,那就需要花式整活了
前面也说了,我们走接口拉数据重新渲染,这样的玩法是比较常规的,缺点是需要重新去实现相关模块,还需要对方开放接口。
现在只能走非正常渠道,比如,容易想到的,就是 我们直接把页面嵌入到自己的系统,同时需要对第三方页面的样式,组件进行控制
上面提到的方法,就是在我们自己的系统里,规划一个 iframe,通过 src 属性引入第三方的系统。
这里一个最大的问题,就是跨域。网络上提到的最有可能解决的方案,通过 postMessage跨域,可惜,这个还是需要第三方配合
首先狭义的同源就是指,域名、协议、端口均为相同。
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
反向代理
配置一个 url,用户如果访问这个 url ,就能给代理到真实需要的 url
动静分离
正如字面的意思,动态的资源(需要服务器进行计算)和静态的资源(一般是指 html,css,js,img等静态页面的相关资源)分离开来
因为我们的 A 应用使用了 80 端口,第三方的 B 系统也使用了 80 端口,那就需要加后缀来区分代理到 B 系统,大致的 url 如下
# A 的 url http://localhost/ # B 加后缀的 url http://localhost/three-part # B 的实际 url http://172.16.1.1/
我们正常访问 localhost 会到 A 系统的首页,访问 172.16.1.1 会访问 B 的首页,如果通过代理的 URL 去访问,nginx 实际上会给代理到 172.16.1.1/three-part,没错,测试的时候,发现吧后缀给带过去了?? 不排除我不专业,没配置到位,但我测试的效果就是这样
上述配置的思路,就是让两个应用同 ip 同端口,然后 A 应用里 iframe 加载了 B 的首页,那就能通过 js 去操作
很遗憾,那就只有配置成不同的端口了,比如给 B 应用的代理 url 配置为 localhost:81/,这样一来,无法在 A 应用的 iframe 对应的页面里,编写对 B 应用修改的 js 了
随着我对 B 应用的 f12,我发现,他们封装了一个 x.min.js ,这个文件登陆的时候会加载,进入首页后也会加载。
那么,骚操作就来了,我直接重写他们的这个 js 文件,吧我需要的逻辑安排在文件的最后面,然后,让页面在加载这个 x.min.js 的时候,去加载我服务器端修改过后的 js 文件,而不是去加载第三方服务器里的 x.min.js
整个流程的示意图如下示:
下面就是我配置好正在用的nginx配置
upstream mir{ server 10.1.128.58:80; } server { listen localhost:8001; # nginx 需要监听的 url及对应的端口 location =/static/mir.min.js { root C:/r9/bin/resources; } location / { # 可以理解为这里用了一个 url 的变量名,这个变量名定义在 upstream 中 proxy_pass http://mir; # 下面几项算是跨域标配,直接抄上就行 proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Fonwarded-For $proxy_add_x_forwarded_for; if ($request_method = 'OPTIONS') { return 204; } } # 静态资源放行 location ~ \..jpg" alt="nginx反向代码解决跨域访问(nginx 解决跨域问题嵌入第三方页面)" border="0" />
nginx 里的 url 匹配,有一个特点,就是最先匹配原则,每一个请求,从上往下,先匹配到哪一个规则,就直接跳转这个规则对应配置的 url
因为第三方的系统,其实算是一个常规的系统,比如,标配有登陆页,我们需要吞掉登陆的这个步骤,所以,我们需要在动手脚的 x.min.js 里检测第三方系统正确加载后,是否需要进行登陆操作,同时为了友好起见,我们需要添加一个遮罩层,在我们对第三方的页面处理干净之前,得先遮住不让客户看到。
等正确载入第三方的系统后,就可以按需要进行功能裁剪,样式替换
到此这篇关于nginx 解决跨域问题嵌入第三方页面的文章就介绍到这了,更多相关nginx 跨域嵌入第三方页面内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- nginx配置访问接口(nginx网站服务如何配置防盗链推荐)
- nginx反向代理怎样实现(Nginx反向代理配置的全过程记录)
- 怎么查看nginx支持rewrite(nginx里的rewrite跳转的实现)
- nginx 处理服务器错误(nginx服务器异常502 bad gateway原因排查)
- nginx如何配置php项目(Nginx服务器究竟是怎么执行PHP项目)
- nginx负载均衡原理3种(Nginx负载均衡以及动静分离的原理与配置)
- nginx和php怎么结合(php和nginx交互实例讲解)
- nginx是怎样负载均衡的(Nginx四层负载均衡的配置指南)
- nginx报错能看到错误代码(nginx提示:500 Internal Server Error错误的解决方法)
- nginx http转https配置(Nginx配置并兼容HTTP实现代码解析)
- nginx给需要转发的链接添加参数(Nginx 根据URL带的参数转发的实现)
- nginx安全设置(Nginx+ModSecurity安全模块部署的实现)
- nginxhttp转https原理(nginx如何将http访问的网站改成https访问)
- nginx配置root后的路径打不开(详解nginx.conf 中 root 目录设置问题)
- nginx最佳配置(nginx和lvs各自的优劣以及适合的使用环境)
- 如何采集nginx的日志(Filebeat 采集 Nginx 日志的方法)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
热门推荐
- 前端面试题之promise的手动封装(Promise面试题详解之控制并发)
- python复杂的验证码处理(Python 通过打码平台实现验证码的实现)
- python控制流实例(如何用C代码给Python写扩展库Cython)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- docker容器映射到宿主机器(在宿主机上执行docker容器内部的shell或程序方式)
- C# string 和 stringbuilder 的区别
- thinkphp5访问路径(thinkphp5修改view到根目录实例方法)
- memcache安装与调优部署文件(Memcached构建缓存服务器的方法)
- centos7设置开机启动脚本(Centos7.3开机自动启动或执行指定命令操作)
- 云服务器选择七个原则(如何选择一个好的云服务器?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9