腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Nginx反向代理解決跨域詳細(xì)代碼示例

更新時(shí)間：2025年06月19日 10:25:36 作者：小碼龍~

Nginx作為反向代理服務(wù)器,能夠在前端輕松解決跨域問(wèn)題,無(wú)需后端配合,這篇文章主要介紹了Nginx反向代理解決跨域的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

Nginx反向代理解決跨域

一、同源策略

定義：同源策略（Same-Origin Policy）是指瀏覽器限制一個(gè)源（origin）的文檔或腳本如何與另一個(gè)源的資源進(jìn)行交互的安全策略。源是由協(xié)議（如HTTP HTTPS）、域名（如example.com）和端口號(hào)（如80、443）組成的唯一標(biāo)識(shí)。
原理：根據(jù)同源策略，如果兩個(gè)資源的協(xié)議、域名和端口號(hào)完全相同，則它們被認(rèn)為是同源的，可以相互訪問(wèn)和交互。否則，它們被認(rèn)為是不同源的，瀏覽器會(huì)限制它們之間的交互，以防止惡意網(wǎng)站通過(guò)跨域請(qǐng)求獲取用戶的敏感信息或進(jìn)行其他惡意操作。

二、跨域是什么？

‌‌跨域（Cross-Origin）是指在‌瀏覽器中，當(dāng)前正在訪問(wèn)的頁(yè)面的域名與請(qǐng)求的資源域名不一致的情況。‌ 例如，在A網(wǎng)站上通過(guò)AJAX請(qǐng)求B網(wǎng)站的數(shù)據(jù)時(shí)，就會(huì)產(chǎn)生跨域問(wèn)題。‌跨域問(wèn)題通常發(fā)生在前后端分離的應(yīng)用中，當(dāng)前端和后端部署在不同的域或端口上時(shí)，瀏覽器出于安全考慮會(huì)阻止跨域請(qǐng)求。跨域是由瀏覽器的‌同源策略造成的。

三、Nginx解決跨域

nginx通過(guò)反向代理解決跨域問(wèn)題，本文是直接在nginx目錄html操作的,完成這步你需要下載nginx ：https://nginx.org/自行去官網(wǎng)下載

1.前端示例代碼

代碼如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<button id="btn">點(diǎn)擊獲取</button>
		
		
		<script>
			
			 btn.onclick = () => {
				 let xhr = new XMLHttpRequest()
				 console.log(222);
				 // 注意：這里我們地址不要寫后端完整地址：我們給前面加一個(gè)/api就行，把
				 // 端口哪里刪去
				  xhr.open('GET', '/api/user/all')
				  xhr.onreadystatechange = () => {
				    if (xhr.readyState == 4 && xhr.status == 200) {
				      console.log(JSON.parse(xhr.responseText))
				    }
				  }
				   xhr.send()
			 }
		</script>
		 
	</body>
	
</html>

2.說(shuō)明

這是我后端服務(wù)器上的接口地址：端口號(hào)是在5000，而我前端頁(yè)面是80端口，所以就會(huì)導(dǎo)致跨域問(wèn)題

四、nginx反向代理配置

配置反向代理，這里的/api/一定要與前端請(qǐng)求接口地址一致。

location /api/ {
	proxy_pass http://127.0.0.1:5000/;
}

五、啟動(dòng)nginx

雙擊點(diǎn)擊nginx.exe啟動(dòng)即可

六、最終效果

發(fā)現(xiàn)我們后端請(qǐng)求就成功了。

擴(kuò)展

1. Nginx作為Web服務(wù)器的角色

監(jiān)聽端口：Nginx通常配置為監(jiān)聽特定的端口（如80端口用于HTTP，443端口用于HTTPS）。所有發(fā)送到這些端口的請(qǐng)求都會(huì)被Nginx接收。
處理請(qǐng)求：Nginx會(huì)根據(jù)其配置文件中的規(guī)則處理這些請(qǐng)求。這些規(guī)則可能包括將請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)器、返回靜態(tài)文件、重定向請(qǐng)求等。

2. Nginx作為反向代理的默認(rèn)行為

反向代理機(jī)制：當(dāng)Nginx配置為反向代理時(shí)，它會(huì)作為客戶端和后端服務(wù)器之間的中介?？蛻舳说恼?qǐng)求首先到達(dá)Nginx，然后Nginx根據(jù)配置將這些請(qǐng)求轉(zhuǎn)發(fā)到后端服務(wù)器。
透明性：對(duì)于客戶端而言，這個(gè)過(guò)程是透明的?？蛻舳瞬恍枰勒?qǐng)求是通過(guò)Nginx轉(zhuǎn)發(fā)的，它只需要將請(qǐng)求發(fā)送到Nginx監(jiān)聽的地址和端口即可。

3.Nginx 如何攔截請(qǐng)求？

1.網(wǎng)絡(luò)層的請(qǐng)求入口

域名解析到 Nginx IP：客戶端通過(guò)域名（如yourdomain.com）訪問(wèn)服務(wù)時(shí)，DNS 解析會(huì)將域名指向 Nginx
所在服務(wù)器的 IP 地址。
Nginx 監(jiān)聽端口：Nginx 監(jiān)聽 80（HTTP）或 443（HTTPS）端口，所有到達(dá)該端口的請(qǐng)求都會(huì)被 Nginx 接收。
結(jié)果：無(wú)論客戶端是否“知道”Nginx 的存在，只要請(qǐng)求的域名或 IP 指向 Nginx，請(qǐng)求就會(huì)先到達(dá) Nginx。

Nginx 配置的匹配規(guī)則

server塊匹配域名：Nginx 根據(jù)server_name匹配請(qǐng)求的域名，決定由哪個(gè)server塊處理請(qǐng)求。
location塊匹配路徑：在server塊內(nèi)，location塊根據(jù)請(qǐng)求的路徑（如/api/）進(jìn)一步匹配，并決定如何處理請(qǐng)求（如轉(zhuǎn)發(fā)到后端或返回靜態(tài)文件）。

4. 如何驗(yàn)證請(qǐng)求是否經(jīng)過(guò)Nginx

查看Nginx日志：Nginx會(huì)記錄所有接收到的請(qǐng)求和轉(zhuǎn)發(fā)的請(qǐng)求。你可以查看Nginx的訪問(wèn)日志（通常位于/var/log/nginx/access.log）來(lái)確認(rèn)請(qǐng)求是否經(jīng)過(guò)了Nginx。
使用開發(fā)者工具：在瀏覽器中打開開發(fā)者工具（通常按F12），查看網(wǎng)絡(luò)請(qǐng)求。你可以看到請(qǐng)求的URL、響應(yīng)頭等信息，其中可能包含Nginx添加的頭部信息（如X-Forwarded-For）。

5. 如果你不希望請(qǐng)求經(jīng)過(guò)Nginx

直接訪問(wèn)后端：如果你希望客戶端直接訪問(wèn)后端服務(wù)器，你可以將后端服務(wù)器的地址和端口直接暴露給客戶端。但這樣做可能會(huì)帶來(lái)安全風(fēng)險(xiǎn)，因?yàn)楹蠖朔?wù)器將直接暴露在公網(wǎng)上。
修改網(wǎng)絡(luò)架構(gòu)：你可以考慮修改你的網(wǎng)絡(luò)架構(gòu)，例如使用防火墻規(guī)則、負(fù)載均衡器等其他組件來(lái)管理請(qǐng)求流量。

總結(jié)

綜上所述，Nginx解決跨域問(wèn)題的方法有很多，比如修改響應(yīng)頭、使用CORS模塊。但你可以根據(jù)實(shí)際需求選擇最適合的方法來(lái)解決跨域問(wèn)題。

到此這篇關(guān)于Nginx反向代理解決跨域的文章就介紹到這了,更多相關(guān)Nginx反向代理解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Nginx反向代理解決跨域詳細(xì)代碼示例

目錄

前言

一、同源策略

二、跨域是什么？