nginx 解決跨域問(wèn)題嵌入第三方頁(yè)面
前言
我們自己的系統(tǒng)需要加載第三方系統(tǒng)中的一部分組件。計(jì)劃的是第三方開(kāi)發(fā)、提供相關(guān)接口,我們通過(guò)接口獲取到數(shù)據(jù),然后,再用這些數(shù)據(jù)在我們系統(tǒng)中吧相關(guān)的功能實(shí)現(xiàn)了
可惜的是,領(lǐng)導(dǎo)沒(méi)有協(xié)調(diào)下來(lái)。正規(guī)的途徑搞不定,那就需要花式整活了
前面也說(shuō)了,我們走接口拉數(shù)據(jù)重新渲染,這樣的玩法是比較常規(guī)的,缺點(diǎn)是需要重新去實(shí)現(xiàn)相關(guān)模塊,還需要對(duì)方開(kāi)放接口。
現(xiàn)在只能走非正常渠道,比如,容易想到的,就是 我們直接把頁(yè)面嵌入到自己的系統(tǒng),同時(shí)需要對(duì)第三方頁(yè)面的樣式,組件進(jìn)行控制
困難
上面提到的方法,就是在我們自己的系統(tǒng)里,規(guī)劃一個(gè) iframe,通過(guò) src 屬性引入第三方的系統(tǒng)。
這里一個(gè)最大的問(wèn)題,就是跨域。網(wǎng)絡(luò)上提到的最有可能解決的方案,通過(guò) postMessage跨域,可惜,這個(gè)還是需要第三方配合
跨域定義
首先狹義的同源就是指,域名、協(xié)議、端口均為相同。
跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript實(shí)施的安全限制。
nginx 的特性
反向代理
配置一個(gè) url,用戶(hù)如果訪問(wèn)這個(gè) url ,就能給代理到真實(shí)需要的 url
動(dòng)靜分離
正如字面的意思,動(dòng)態(tài)的資源(需要服務(wù)器進(jìn)行計(jì)算)和靜態(tài)的資源(一般是指 html,css,js,img等靜態(tài)頁(yè)面的相關(guān)資源)分離開(kāi)來(lái)
嘗試實(shí)現(xiàn)
因?yàn)槲覀兊?A 應(yīng)用使用了 80 端口,第三方的 B 系統(tǒng)也使用了 80 端口,那就需要加后綴來(lái)區(qū)分代理到 B 系統(tǒng),大致的 url 如下
# A 的 url http://localhost/ # B 加后綴的 url http://localhost/three-part # B 的實(shí)際 url http://172.16.1.1/
我們正常訪問(wèn) localhost 會(huì)到 A 系統(tǒng)的首頁(yè),訪問(wèn) 172.16.1.1 會(huì)訪問(wèn) B 的首頁(yè),如果通過(guò)代理的 URL 去訪問(wèn),nginx 實(shí)際上會(huì)給代理到 172.16.1.1/three-part,沒(méi)錯(cuò),測(cè)試的時(shí)候,發(fā)現(xiàn)吧后綴給帶過(guò)去了?? 不排除我不專(zhuān)業(yè),沒(méi)配置到位,但我測(cè)試的效果就是這樣
上述配置的思路,就是讓兩個(gè)應(yīng)用同 ip 同端口,然后 A 應(yīng)用里 iframe 加載了 B 的首頁(yè),那就能通過(guò) js 去操作
很遺憾,那就只有配置成不同的端口了,比如給 B 應(yīng)用的代理 url 配置為 localhost:81/,這樣一來(lái),無(wú)法在 A 應(yīng)用的 iframe 對(duì)應(yīng)的頁(yè)面里,編寫(xiě)對(duì) B 應(yīng)用修改的 js 了
最終效果
隨著我對(duì) B 應(yīng)用的 f12,我發(fā)現(xiàn),他們封裝了一個(gè) x.min.js ,這個(gè)文件登陸的時(shí)候會(huì)加載,進(jìn)入首頁(yè)后也會(huì)加載。
那么,騷操作就來(lái)了,我直接重寫(xiě)他們的這個(gè) js 文件,吧我需要的邏輯安排在文件的最后面,然后,讓頁(yè)面在加載這個(gè) x.min.js 的時(shí)候,去加載我服務(wù)器端修改過(guò)后的 js 文件,而不是去加載第三方服務(wù)器里的 x.min.js
整個(gè)流程的示意圖如下示:
下面就是我配置好正在用的nginx配置
upstream mir{ server 10.1.128.58:80; } server { listen localhost:8001; # nginx 需要監(jiān)聽(tīng)的 url及對(duì)應(yīng)的端口 location =/static/mir.min.js { root C:/r9/bin/resources; } location / { # 可以理解為這里用了一個(gè) url 的變量名,這個(gè)變量名定義在 upstream 中 proxy_pass http://mir; # 下面幾項(xiàng)算是跨域標(biāo)配,直接抄上就行 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; } } # 靜態(tài)資源放行 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; } # 添加跨域請(qǐng)求頭 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 # 配置常規(guī)的友好錯(cuò)誤提示頁(yè) error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
nginx 里的 url 匹配,有一個(gè)特點(diǎn),就是最先匹配原則,每一個(gè)請(qǐng)求,從上往下,先匹配到哪一個(gè)規(guī)則,就直接跳轉(zhuǎn)這個(gè)規(guī)則對(duì)應(yīng)配置的 url
題外話
因?yàn)榈谌降南到y(tǒng),其實(shí)算是一個(gè)常規(guī)的系統(tǒng),比如,標(biāo)配有登陸頁(yè),我們需要吞掉登陸的這個(gè)步驟,所以,我們需要在動(dòng)手腳的 x.min.js 里檢測(cè)第三方系統(tǒng)正確加載后,是否需要進(jìn)行登陸操作,同時(shí)為了友好起見(jiàn),我們需要添加一個(gè)遮罩層,在我們對(duì)第三方的頁(yè)面處理干凈之前,得先遮住不讓客戶(hù)看到。
等正確載入第三方的系統(tǒng)后,就可以按需要進(jìn)行功能裁剪,樣式替換
到此這篇關(guān)于nginx 解決跨域問(wèn)題嵌入第三方頁(yè)面的文章就介紹到這了,更多相關(guān)nginx 跨域嵌入第三方頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在nginx中配置pathinfo模式支持thinkphp的URL重寫(xiě)
這篇文章主要介紹了在nginx中配置pathinfo模式的例子,用來(lái)支持thinkphp的URL重寫(xiě),并解決了thinkphp一個(gè)路徑問(wèn)題,需要的朋友可以參考下2014-04-04詳解nginx 的 default_server 定義及匹配規(guī)則
這篇文章主要介紹了詳解nginx 的 default_server 定義及匹配規(guī)則,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08在Nginx中使用X-Sendfile頭提升PHP文件下載的性能(針對(duì)大文件下載)
這篇文章主要介紹了在Nginx中使用X-Sendfile頭提升PHP文件下載的性能,可以用在針對(duì)大文件下載的情況,下載非網(wǎng)站W(wǎng)eb目錄文件的需求,提供下載權(quán)限控制的場(chǎng)景,需要的朋友可以參考下2014-07-07Nginx使用Lua模塊實(shí)現(xiàn)WAF的原理解析
waf是通過(guò)執(zhí)行一系列針對(duì)HTTP/HTTPS的安全策略來(lái)專(zhuān)門(mén)為Web應(yīng)用提供保護(hù)的一款產(chǎn)品,本文重點(diǎn)給大家介紹Nginx使用Lua模塊實(shí)現(xiàn)WAF的原理,需要的朋友參考下吧2021-09-09linux(centos5.5)/windows下nginx開(kāi)啟phpinfo模式功能的配置方法分享
某站點(diǎn)用到結(jié)合phpinfo功能的urlrewrite,在nginx中需要在nginx.conf文件中進(jìn)行配置才可支持phpinfo2013-02-02nginx報(bào)錯(cuò)upstream sent invalid header的解決
本文主要介紹了nginx報(bào)錯(cuò)upstream sent invalid header的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12nginx負(fù)載均衡配置,宕機(jī)自動(dòng)切換方式
這篇文章主要介紹了nginx負(fù)載均衡配置,宕機(jī)自動(dòng)切換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-05-05Nginx加固的幾種方式(控制超時(shí)時(shí)間&限制客戶(hù)端下載速度&并發(fā)連接數(shù))
本文主要介紹了Nginx加固的幾種方式,包括控制超時(shí)時(shí)間,限制客戶(hù)端下載速度,并發(fā)連接數(shù)這幾種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03Windows下Nginx的啟動(dòng)停止等基本操作命令詳解
在Windows下使用Nginx,我們需要掌握一些基本的操作命令,今天為大家分享幾個(gè)Windows下操作Nginx的基本命令2018-10-10