Nginx 反向代理（解决跨域）

小码龙~

已于 2025-05-21 17:47:22 修改

阅读量7.3k

点赞数 10

分类专栏： Nginx 文章标签：笔记前端 nginx 后端学习

于 2024-11-03 18:00:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_48076747/article/details/143468005

版权

Nginx 专栏收录该内容

1 篇文章

订阅专栏

文章目录

前言
一、同源策略
二、跨域是什么？
三、Nginx解决跨域
- 1.前端示例代码
- 2.说明
四、nginx反向代理配置
五、启动nginx
六、最终效果
扩展
总结

前言

Nginx反向代理解决跨域

一、同源策略

定义：同源策略（Same-Origin Policy）是指浏览器限制一个源（origin）的文档或脚本如何与另一个源的资源进行交互的安全策略。源是由协议（如HTTP HTTPS）、域名（如example.com）和端口号（如80、443）组成的唯一标识。
原理：根据同源策略，如果两个资源的协议、域名和端口号完全相同，则它们被认为是同源的，可以相互访问和交互。否则，它们被认为是不同源的，浏览器会限制它们之间的交互，以防止恶意网站通过跨域请求获取用户的敏感信息或进行其他恶意操作。

二、跨域是什么？

‌‌跨域（Cross-Origin）是指在‌浏览器中，当前正在访问的页面的域名与请求的资源域名不一致的情况。‌ 例如，在A网站上通过AJAX请求B网站的数据时，就会产生跨域问题。‌跨域问题通常发生在前后端分离的应用中，当前端和后端部署在不同的域或端口上时，浏览器出于安全考虑会阻止跨域请求。跨域是由浏览器的‌同源策略造成的。

三、Nginx解决跨域

nginx通过反向代理解决跨域问题，本文是直接在nginx目录html操作的,完成这步你需要下载nginx ：https://nginx.org/自行去官网下载

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.说明

这是我后端服务器上的接口地址：端口号是在5000，而我前端页面是80端口，所以就会导致跨域问题

在这里插入图片描述

四、nginx反向代理配置

配置反向代理，这里的/api/一定要与前端请求接口地址一致。

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

在这里插入图片描述

五、启动nginx

双击点击nginx.exe启动即可

在这里插入图片描述

六、最终效果

发现我们后端请求就成功了。
在这里插入图片描述

扩展

1. Nginx作为Web服务器的角色

监听端口：Nginx通常配置为监听特定的端口（如80端口用于HTTP，443端口用于HTTPS）。所有发送到这些端口的请求都会被Nginx接收。
处理请求：Nginx会根据其配置文件中的规则处理这些请求。这些规则可能包括将请求转发到后端服务器、返回静态文件、重定向请求等。

2. Nginx作为反向代理的默认行为

反向代理机制：当Nginx配置为反向代理时，它会作为客户端和后端服务器之间的中介。客户端的请求首先到达Nginx，然后Nginx根据配置将这些请求转发到后端服务器。
透明性：对于客户端而言，这个过程是透明的。客户端不需要知道请求是通过Nginx转发的，它只需要将请求发送到Nginx监听的地址和端口即可。

3.Nginx 如何拦截请求？

1.网络层的请求入口

域名解析到 Nginx IP：客户端通过域名（如yourdomain.com）访问服务时，DNS 解析会将域名指向 Nginx
所在服务器的 IP 地址。
Nginx 监听端口：Nginx 监听 80（HTTP）或 443（HTTPS）端口，所有到达该端口的请求都会被 Nginx 接收。
结果：无论客户端是否“知道”Nginx 的存在，只要请求的域名或 IP 指向 Nginx，请求就会先到达 Nginx。

Nginx 配置的匹配规则

server块匹配域名：Nginx 根据server_name匹配请求的域名，决定由哪个server块处理请求。
location块匹配路径：在server块内，location块根据请求的路径（如/api/）进一步匹配，并决定如何处理请求（如转发到后端或返回静态文件）。

4. 如何验证请求是否经过Nginx

查看Nginx日志：Nginx会记录所有接收到的请求和转发的请求。你可以查看Nginx的访问日志（通常位于/var/log/nginx/access.log）来确认请求是否经过了Nginx。
使用开发者工具：在浏览器中打开开发者工具（通常按F12），查看网络请求。你可以看到请求的URL、响应头等信息，其中可能包含Nginx添加的头部信息（如X-Forwarded-For）。