亲宝软件园·资讯

展开

nginx 跨域嵌入第三方页面 nginx 解决跨域问题嵌入第三方页面

安逸的咸鱼 人气:0
想了解nginx 解决跨域问题嵌入第三方页面的相关内容吗,安逸的咸鱼在本文为您仔细讲解nginx 跨域嵌入第三方页面的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:nginx,跨域嵌入第三方,nginx,跨域嵌入,下面大家一起来学习吧。

前言

我们自己的系统需要加载第三方系统中的一部分组件。计划的是第三方开发、提供相关接口,我们通过接口获取到数据,然后,再用这些数据在我们系统中吧相关的功能实现了

可惜的是,领导没有协调下来。正规的途径搞不定,那就需要花式整活了

前面也说了,我们走接口拉数据重新渲染,这样的玩法是比较常规的,缺点是需要重新去实现相关模块,还需要对方开放接口。

现在只能走非正常渠道,比如,容易想到的,就是 我们直接把页面嵌入到自己的系统,同时需要对第三方页面的样式,组件进行控制

困难

上面提到的方法,就是在我们自己的系统里,规划一个 iframe,通过 src 属性引入第三方的系统。
这里一个最大的问题,就是跨域。网络上提到的最有可能解决的方案,通过 postMessage跨域,可惜,这个还是需要第三方配合

跨域定义

首先狭义的同源就是指,域名、协议、端口均为相同。
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

nginx 的特性

反向代理

配置一个 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 ~ \.(gif|jpg|jpeg|css|js|svg)$ {
  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;
  expires 30d;
 }
 # 添加跨域请求头
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow_Credentials' 'true';
 add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
 add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
 #error_page  404              /404.html;

 # redirect server error pages to the static page /50x.html
 # 配置常规的友好错误提示页
 error_page   500 502 503 504  /50x.html;
 location = /50x.html {
  root   html;
 }

}

nginx 里的 url 匹配,有一个特点,就是最先匹配原则,每一个请求,从上往下,先匹配到哪一个规则,就直接跳转这个规则对应配置的 url

题外话

因为第三方的系统,其实算是一个常规的系统,比如,标配有登陆页,我们需要吞掉登陆的这个步骤,所以,我们需要在动手脚的 x.min.js 里检测第三方系统正确加载后,是否需要进行登陆操作,同时为了友好起见,我们需要添加一个遮罩层,在我们对第三方的页面处理干净之前,得先遮住不让客户看到。
等正确载入第三方的系统后,就可以按需要进行功能裁剪,样式替换

加载全部内容

相关教程
猜你喜欢
用户评论