Nginx 反向代理（解决跨域）

文章目录

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

---

前言

Nginx反向代理解决跨域

一、同源策略

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

二、跨域是什么？

‌‌跨域（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启动即可

六、最终效果

发现我们后端请求就成功了。

总结

综上所述，Nginx解决跨域问题的方法有很多，比如修改响应头、使用CORS模块。但你可以根据实际需求选择最适合的方法来解决跨域问题。