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

相关推荐
小桥风满袖1 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper2 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友2 分钟前
阶段四:实战(项目开发能力)
前端·rust
小高0073 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
精灵vector3 分钟前
LLMCompiler:基于LangGraph的并行化Agent架构高效实现
人工智能·python·langchain
子兮曰4 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
即兴小索奇7 分钟前
Google AI Mode 颠覆传统搜索方式,它是有很大可能的
前端·后端·架构
大虾写代码16 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事16 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端