同源策略引發(fā)的跨域問題它都能輕松解決！這到底是什么神奇的東西兒

Nginx概念

Nginx是一款高性能的HTTP服務(wù)器,反向代理服務(wù)器及電子郵件(IMAP/POPP3)代理服務(wù)器.由俄羅斯的Igor Sysoev所開發(fā),Nginx能夠支撐5萬并發(fā)鏈接,并且CPU,內(nèi)存等資源消耗非常低,運行非常穩(wěn)定

Nginx應(yīng)用場景

HTTP服務(wù)器,虛擬主機: Nginx是一個HTTP服務(wù)可以獨立提供HTTP服務(wù),可以做網(wǎng)頁靜態(tài)服務(wù)器,可以實現(xiàn)在一臺服務(wù)器上虛擬出多個網(wǎng)站,例如個人網(wǎng)站使用的虛擬主機

反向代理: 當(dāng)網(wǎng)站的訪問量達到一定程度后,單臺服務(wù)器不能滿足用戶請求時,需要用多臺服務(wù)器集群時可以使用Nginx做反向代理

負載均衡: 多臺服務(wù)器可以平均分擔(dān)負載,不會因為某臺服務(wù)器負載高宕機而某臺服務(wù)器閑置的情況

HTTP服務(wù)器,虛擬主機

使用Docker安裝運行Nginx,在./conf 里創(chuàng)建nginx.conf文件,配置docker-compose.yml

version: '3.1' services: nginx: restart: always image: nginx container_name: nginx ports: - 80:80 volumes: - ./conf/nginx.conf:/etc/nginx/nginx.conf - ./wwwroot:/usr/share/nginx/wwwroot

虛擬主機: 虛擬主機是一種特殊的軟硬件技術(shù).可以將網(wǎng)絡(luò)上每一臺計算機分成多個虛擬主機,每個虛擬主機可以獨立對外提供www服務(wù),這樣就能實現(xiàn)一臺主機對外提供多個web服務(wù),每個虛擬主機之間是獨立的,互不影響的

通過Nginx可以實現(xiàn)虛擬主機的配置,Nginx支持三種類型的虛擬主機的配置:

基于IP的虛擬主機

基于域名的虛擬主機

基于端口的虛擬主機

Nginx配置文件結(jié)構(gòu): 其中每個server就是一個主機

events { } http { server{ } server{ } }

需求:

兩個域名指向同一臺Nginx服務(wù)器,用戶訪問不同的域名顯示不同的網(wǎng)頁內(nèi)容

兩個域名是admin.service.itoken.oxford.com和admin.web.itoken.oxford.com

Nginx服務(wù)器使用虛擬機192.168.32.255

配置 Windows Hosts文件:

修改window的hosts文件(C:/Windows/System32/drivers/etc)-SwitchHosts

通過host文件指定admin.service.itoken.oxford.com和admin.web.itoken.oxford.com對應(yīng)192.168.32.255虛擬機

創(chuàng)建目錄及文件: 在 /usr/local/docker/nginx/wwwroot目錄下創(chuàng)建htmlservice和htmlweb兩個目錄,并分別創(chuàng)建index.html文件

配置虛擬主機: 修改 /usr/local/docker/nginx/conf目錄下的nginx.conf配置文件

user nginx; worker_processes 1; events { worker_connections 1024; } http{ include mime.type; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server{ listen 80; server_name admin.service.itoken.oxford.com # 所有的請求都是以 / 開始,所有的請求都可以匹配此location location / { root /usr/local/docker/nginx/wwwroot/htmlservice; # 指定歡迎頁面,按從左到右順序查找 index index.html index.htm; } } server{ listen 80; server_name admin.web.itoken.oxford.com location / { root /usr/share/nginx/wwwroot/htmlweb; index index.html index.htm; } } }

需求:

Nginx對外提供80和8080兩個端口監(jiān)聽服務(wù)

請求80端口則請求html80目錄下的html

請求8080端口則請求html8080目錄下的html

創(chuàng)建目錄及文件: 在 /usr/local/docker/nginx/wwwroot目錄下創(chuàng)建html80和html8080兩個目錄,并分別創(chuàng)建兩個index.html文件

配置虛擬主機: 修改 /usr/local/docker/nginx/conf目錄下的nginx.conf配置文件

worker_processes 1; events { worker_connections 1024; } http{ include mime.type; default_type application/octet-stream; sendfile on; keepalive_timeout 65; # 配置虛擬主機 192.168.32.255 server{ # 監(jiān)聽的IP和端口,配置192.168.32.255:80 listen 80; # 虛擬主機名稱,這里配置IP地址 server_name 192.168.32.255; # 所有的請求都是以 / 開始,所有的請求都可以匹配此location location / { # 使用 root 指令指定虛擬主機目錄即網(wǎng)頁存放目錄 # 例如:訪問 http://ip/index.html 將找到 /usr/local/docker/nginx/wwwroot/html80/index.html # 例如:訪問 http://ip/item/index.html 將找到 /usr/local/docker/nginx/wwwroot/html80/item/index.html root /usr/share/nginx/wwwroot/html80; # 指定歡迎頁面,按從左到右順序查找 index index.html index.htm; } } # 配置虛擬主機 192.168.32.255 server{ listen 8080; server_name 192.168.32.255; location / { root /usr/share/nginx/wwwroot/html8080; index index.html index.htm; } } }

Nginx 反向代理

客戶端在發(fā)送請求時,不會直接發(fā)送給目的主機.而是先發(fā)給代理服務(wù)器,代理服務(wù)器接收客戶端請求后,再向主機發(fā)出,并接收目的主機返回的數(shù)據(jù),存放在代理服務(wù)器的硬盤中,再發(fā)送給客戶機

提高訪問速度: 由于目標(biāo)主機返回的數(shù)據(jù)存放在代理服務(wù)器的硬盤中,因此下一次客戶在訪問相同的站點數(shù)據(jù)時,會直接從代理服務(wù)器的硬盤中讀取,起到了緩存的作用,尤其對于熱門站點能明顯提高請求速度

防火墻作用: 由于所有客戶機請求都必須通過代理服務(wù)器訪問遠程站點,因此可在代理服務(wù)器上設(shè)限,過濾掉某些不安全信息

通過代理服務(wù)器訪問不能訪問的目標(biāo)站點: 互聯(lián)網(wǎng)上有許多開放的代理服務(wù)器,客戶機在訪問受限時,可通過不受限的代理服務(wù)器訪問目標(biāo)站點

架設(shè)在客戶機和目標(biāo)主機之間,只用于代理內(nèi)部網(wǎng)絡(luò)對Internet的連接請求,客戶機必須指定代理服務(wù)器,并將本來要直接發(fā)送到web服務(wù)器上的http請求發(fā)送到代理服務(wù)器中

反向代理服務(wù)器架設(shè)在服務(wù)器端,通過緩沖經(jīng)常被請求的頁面來緩解服務(wù)器的工作量,將客戶機請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的目標(biāo)服務(wù)器,并將從服務(wù)器上得到的結(jié)果返回給Internet上請求連接的客戶端,此時代理服務(wù)器與目標(biāo)主機一起對外表現(xiàn)為一個服務(wù)器

防止外網(wǎng)對內(nèi)網(wǎng)服務(wù)器的惡性攻擊

緩存以減少服務(wù)器壓力

訪問安全控制

進行負載均衡,將用戶請求分配給多個服務(wù)器

啟動Tomcat容器: 啟動兩個Tomcat容器,映射端口為9090和9091,配置docker-compose.yml

version: '3' services: tomcat1: image: tomcat container_name: tomcat1 ports: - 9090:8080 tomcat2: image: tomcat container_name: tomcat2 ports: - 9091:8080

配置Nginx反向代理: 修改 /usr/local/docker/nginx/conf 目錄下的nginx.conf配置文件

user nginx; worker_processes 1; events { worker_connection 1024; } http { include mime.type; default_type application/octet-stream; sendfile on; keepalive_timeout 65; # 配置一個tomcat1代理服務(wù)器 upstream tomcat_server1 { server 192.168.32.255:9090; } # 配置一個tomcat2代理服務(wù)器 upstream tomcat_server2{ server 192.168.32.255:9091; } server { listen 80; server_name admin.service.itoken.oxford.com # 所有的請求都是以 / 開始,所有的請求都可以匹配此location location / { # 域名 admin.service.itoken.oxford.com的請求全部轉(zhuǎn)發(fā)到tomcat_server1,即tomcat1服務(wù)器上 proxy_pass http://tomcat_server1; # 歡迎頁面,按照從左到右的順序查找頁面 index index.jsp index.html index.htm; } } server{ listen 80; server_name admin.web.itoken.oxford.com location / { # 域名 admin.web.itoken.oxford.com的請求全部轉(zhuǎn)發(fā)到tomcat_server2,即tomcat2服務(wù)器上 proxy_pass http://tomcat_server2; index index.jsp index.html index.htm; } } }

Nginx負載均衡

負載均衡建立在現(xiàn)有網(wǎng)絡(luò)結(jié)構(gòu)之上,提供了一種廉價有效透明的方法擴展網(wǎng)絡(luò)設(shè)備和服務(wù)器的帶寬,增加吞吐量,加強網(wǎng)絡(luò)數(shù)據(jù)處理能力,提高網(wǎng)絡(luò)的靈活性和可用性

負載均衡(Load Balance),分攤到多個操作單元上進行執(zhí)行,例如Web服務(wù)器,FTP服務(wù)器,企業(yè)關(guān)鍵應(yīng)用服務(wù)器和其它關(guān)鍵任務(wù)服務(wù)器等,從而共同完成工作任務(wù)

需求:

nginx作為負載均衡服務(wù)器,用戶請求先到達nginx,再由nginx根據(jù)負載均衡配置將請求轉(zhuǎn)發(fā)到tomcat服務(wù)器

nginx負載均衡服務(wù)器:192.168.32.255:80

tomcat服務(wù)器:192.168.32.255:9090

Nginx配置負載均衡: 修改 /usr/local/docker/nginx/conf下的nginx.conf配置文件

user nginx; worker_processes 1; events { worker_connection 1024; } http { include mime.type; default_type application/octet-stream; sendfile on; keepalive_timeout 65; upstream myapp { server 192.168.32.255:9090 weight=10; server 192.168.32.255:9091 weight=10; } server{ listen 80; server_name nginx.oxford.com; location / { proxy_pass http://myapp; index index.jsp index.html index.htm; } } }

Nginx 解決跨域問題

跨域問題

在瀏覽器端進行Ajax請求時會出現(xiàn)跨域問題

跨域: 瀏覽器不能執(zhí)行其它網(wǎng)站的腳本.是由于瀏覽器的同源策略造成的,是瀏覽器對JavaScript施加的安全限制

同源

同源: 域名,協(xié)議,端口均相同

解決跨域問題方式

CORS是W3C標(biāo)準(zhǔn),全稱"跨資源共享"(Cross-origin resource sharing),允許瀏覽器向跨源服務(wù)器發(fā)出XMLHttpRequest請求,從而克服了Ajax只能同源使用的限制

CORS需要瀏覽器和服務(wù)器同時支持

目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10.

整個CORS通信過程,都是通過瀏覽器自動完成,不需要用戶參與.對于開發(fā)者來說,CORS通信與同源Ajax通信沒有差別,代碼完全一樣.

瀏覽器一旦發(fā)現(xiàn)Ajax請求跨源,就會自動添加一些附加的頭信息,有時還會多出一次附加 的請求,但用戶不會有感覺

實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器,只要服務(wù)器實現(xiàn)了CORS接口,就可以跨域通信

在header中設(shè)置:Access-Control-Allow-Origin(在服務(wù)器請求控制器中的controller類標(biāo)注 @CrossOrigin(value="*") 注解)

JSONP:(JSON with Padding),JSON的一種"使用模式:,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問問題

由于同源策略,一般server1.example.com的網(wǎng)頁無法與server2.example.com的服務(wù)器進行訪問,而HTML的< script>元素是個例外

利用< script>元素這個開放策略,網(wǎng)頁可以得到從其它來源動態(tài)產(chǎn)生的JSON資料,而使用的這種模式就叫JSONP

用JSONP抓到的資料不是JSON,而是任意的JavaScript,用JavaScript直譯器執(zhí)行而不是用JSON解析器解析

需要目標(biāo)服務(wù)器配合一個callback函數(shù)

CORS與JSONP比較:

CORS與JSON使用的目的相同,但是比JSONP更強大

CORS支持所有類型的HTTP請求

JSONP只支持GET請求, JSON的優(yōu)勢在于支持老式瀏覽器,以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)

Nginx反向代理解決跨域問題

當(dāng)服務(wù)器無法設(shè)置header或提供callback函數(shù)時就可以采用Nginx反向代理解決跨域問題

在 /usr/local/docker/nginx/conf中的nginx.conf里的location中增加配置(Get:字體跨域):

add_header Access-Control-Allow-Origin *或域名; add_header Access-Control-Allow-Headers X-Requested-with; add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

配置 /usr/local/docker/nginx/conf中的nginx.conf配置文件(POST:上傳文件):

user nginx; worker_processes 1; events { worker_connection 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name upload.myshop.com; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-with,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'; location / { proxy_pass http://192.168.32.255:8888; if($request_method = 'OPTIONS'){ add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-with; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS; # 解決假請求問題,如果是簡單請求則沒有這個問題,這里是上傳文件,首次請求為OPTIONS方式,實際請求為POST方式 add_header Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-with,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range; return 200; } } } }

Nginx 虛擬化

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。