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模块。但你可以根据实际需求选择最适合的方法来解决跨域问题。

相关推荐
sealaugh3217 分钟前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
ai小鬼头19 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
Touper.25 分钟前
SpringBoot -- 自动配置原理
java·spring boot·后端
思则变1 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
一只鹿鹿鹿1 小时前
信息化项目验收,软件工程评审和检查表单
大数据·人工智能·后端·智慧城市·软件工程
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket