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.前端示例代码

代码如下(示例):

c 复制代码
<!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/一定要与前端请求接口地址一致。

c 复制代码
location /api/ {
	proxy_pass http://127.0.0.1:5000/;
}

五、启动nginx

双击点击nginx.exe启动即可

六、最终效果

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

总结

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

相关推荐
Morris只会敲命令9 分钟前
CentOS 如何使用截图工具截取命令行操作的图片?
前端·chrome
嘻嘻嘻嘻嘻嘻ys10 分钟前
《Vue 3响应式革命:Proxy机制深度解析与性能优化实战》
前端·后端
晓131311 分钟前
第十二章 Python语言-大数据分析PySpark(终)
开发语言·python·数据分析
superkiki13 分钟前
哈基Diff算法?!,有点意思
前端
11在上班13 分钟前
盘点前端日志采集的几种方式
前端·面试
10年前端老司机13 分钟前
微信小程序wxs
前端·javascript·微信小程序
胖方Hale15 分钟前
01. Typescript 基础数据类型
前端·typescript
阿乐去买菜16 分钟前
很喜欢Vue,但还是选择了React: AI时代的新考量
前端·aigc
wifi歪f16 分钟前
如何实现双token机制?
前端
robio_卡卡西16 分钟前
Flutter-电子书EPub解析Iridium
前端