亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2025年06月19日 10:25:36   作者：小碼龍~  
Nginx作為反向代理服務(wù)器,能夠在前端輕松解決跨域問題,無需后端配合,這篇文章主要介紹了Nginx反向代理解決跨域的相關(guān)資料,文中通過代碼介紹的非常詳細(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)為是同源的，可以相互訪問和交互。否則，它們被認(rèn)為是不同源的，瀏覽器會(huì)限制它們之間的交互，以防止惡意網(wǎng)站通過跨域請求獲取用戶的敏感信息或進(jìn)行其他惡意操作。

二、跨域是什么？

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

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

四、nginx反向代理配置

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

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

五、啟動(dòng)nginx

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

六、最終效果

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

擴(kuò)展

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

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

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

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

3.Nginx 如何攔截請求？

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

  • 域名解析到 Nginx IP：客戶端通過域名（如yourdomain.com）訪問服務(wù)時(shí)，DNS 解析會(huì)將域名指向 Nginx
    所在服務(wù)器的 IP 地址。

  • Nginx 監(jiān)聽端口：Nginx 監(jiān)聽 80（HTTP）或 443（HTTPS）端口，所有到達(dá)該端口的請求都會(huì)被 Nginx 接收。

  • 結(jié)果：無論客戶端是否“知道”Nginx 的存在，只要請求的域名或 IP 指向 Nginx，請求就會(huì)先到達(dá) Nginx。

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

  • server塊匹配域名：Nginx 根據(jù)server_name匹配請求的域名，決定由哪個(gè)server塊處理請求。

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

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

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

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

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

總結(jié)

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

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

相關(guān)文章

最新評論