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

快捷導(dǎo)航

Nginx反向代理解決跨域詳細代碼示例

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

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

前言

Nginx反向代理解決跨域

一、同源策略

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

二、跨域是什么？

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

三、Nginx解決跨域

nginx通過反向代理解決跨域問題，本文是直接在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">點擊獲取</button>
		
		
		<script>
			
			 btn.onclick = () => {
				 let xhr = new XMLHttpRequest()
				 console.log(222);
				 // 注意：這里我們地址不要寫后端完整地址：我們給前面加一個/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.說明

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

四、nginx反向代理配置

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

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

五、啟動nginx

雙擊點擊nginx.exe啟動即可

六、最終效果

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

擴展

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

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

2. Nginx作為反向代理的默認行為

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

3.Nginx 如何攔截請求？

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

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

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

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

4. 如何驗證請求是否經(jīng)過Nginx

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

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

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

總結(jié)

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

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Nginx反向代理解決跨域詳細代碼示例

目錄

前言

一、同源策略

二、跨域是什么？