Nginx反向代理解决跨域详细代码示例

更新时间：2025年06月19日 10:25:36 作者：小码龙~

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）。

5. 如果你不希望请求经过Nginx

直接访问后端：如果你希望客户端直接访问后端服务器，你可以将后端服务器的地址和端口直接暴露给客户端。但这样做可能会带来安全风险，因为后端服务器将直接暴露在公网上。
修改网络架构：你可以考虑修改你的网络架构，例如使用防火墙规则、负载均衡器等其他组件来管理请求流量。

总结

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

到此这篇关于Nginx反向代理解决跨域的文章就介绍到这了,更多相关Nginx反向代理解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解ngx_cache_purge _proxy_cache指令使用
本文主要介绍了详解ngx_cache_purge _proxy_cache指令使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Nginx反向代理proxy_cache_path directive is not allowed错误解决方法
这篇文章主要介绍了Nginx反向代理proxy_cache_path directive is not allowed错误解决方法,需要的朋友可以参考下
2015-04-04
Nginx打包RPM过程(FPM工具)
文章介绍了在Linux系统中安装Nginx、Ruby2.6及FPM工具的完整流程,包括源码编译、依赖安装、RPM打包配置及错误处理方法,重点解决rpmbuild缺失问题
2025-07-07
CentOS7安装Nginx并配置自动启动的方法步骤
这篇文章主要介绍了CentOS7安装Nginx并配置自动启动的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Nginx日志输出配置json格式
本文主要介绍了Nginx日志输出配置json格式,包含log_format和access_log两种命令,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-07-07
nginx中的健康检查方案
这篇文章主要介绍了nginx中的健康检查方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
nginx如何实现同个ip、端口访问不同的项目(以路径区分项目)
这篇文章主要介绍了nginx如何实现同个ip、端口访问不同的项目(以路径区分项目),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
nginx刷新页面出现404解决方案(亲测有效)
本文主要介绍了nginx刷新页面出现404解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
使用Nginx代理MySQL连接并限制可访问IP配置
这篇文章主要为大家介绍了如何使用Nginx代理MySQL连接并限制可访问IP配置示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-08-08
Nginx文件已经存在全局反向代理问题排查记录
反向代理除了实现负载均衡之外,还提供如缓存来减少上游服务器的压力,下面这篇文章主要给大家介绍了关于Nginx文件已经存在全局反向代理问题排查的相关资料,需要的朋友可以参考下
2022-07-07