前端跨域解决方案(6):Nginx

1 Nginx 核心

Nginx 是一个开源的高性能 HTTP 和反向代理服务器,以轻量级、高并发处理能力和低资源消耗著称。除作为 Web 服务器外,还可充当邮件代理服务器和通用的 TCP/UDP 代理服务器,广泛应用于现代 Web 架构中。

在 Windows 系统中使用 Nginx 时,命令行操作与类 Unix 系统存在差异,以下是基本操作:

1.1 环境准备

  1. 下载 Nginx for Windows 安装包(需注意 Windows 版本仅支持稳定版,非主线开发版)。

  2. 解压至指定目录(如 C:\nginx),目录结构包含 conf(配置文件)、html(静态资源)等核心文件夹。

1.2 常用命令操作

1.2.1 启动 Nginx

# 切换到Nginx安装目录
cd C:\nginx# 启动Nginx服务
start nginx

1.2.2 停止 Nginx

# 强制停止服务
nginx -s stop# 优雅停止服务(处理完当前请求后停止)
nginx -s quit

1.2.3 重启 Nginx

# 先停止服务
nginx -s stop# 再启动服务
start nginx

1.2.4 重载配置

# 当修改配置文件后,无需重启服务即可使配置生效
nginx -s reload

2 Nginx 跨域方案

2.1 CORS 跨域资源共享方案

Nginx 可通过配置响应头实现 CORS(Cross-Origin Resource Sharing),解决浏览器同源策略限制。

2.1.1 add_header 指令配置

在 Nginx 配置文件中(通常位于安装目录下的 conf\nginx.conf),可以使用 add_header指令添加跨域相关响应头:

server {listen 8080;server_name localhost;location ~ \.json$ {root   data;# 安全建议:明确指定允许的域名而非使用通配符,*表示允许所有域名访问add_header 'Access-Control-Allow-Origin' 'http://yourdomain.com';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 预检请求缓存时间(20天)add_header 'Access-Control-Max-Age' 1728000;# 允许浏览器在跨域请求中携带凭据(如cookies),需注意:此时Access-Control-Allow-Origin不可使用通配符# add_header 'Access-Control-Allow-Credentials' 'true';# 处理OPTIONS预检请求if ($request_method = 'OPTIONS') {return 204;}}
}

2.1.2 前端请求示例 (users.html)

下面是一个前端页面示例,使用 Fetch API 请求 JSON 数据:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nginx跨域示例</title>
</head>
<body><script>// 立即执行的异步函数(async function () {try {// 发送GET请求到Nginx服务器const response = await fetch('http://localhost:8080/users.json', {method: 'GET',headers: {'Accept': 'application/json'}})// 解析响应为JSON格式const data = await response.json();// 打印获取到的数据console.log('请求响应:', data);} catch (error) {// 错误处理console.error('请求出错:', error);}})();</script>
</body>
</html>

数据文件示例 (users.json) 如下:

[{"id":1,"name":"张三"}]

2.2 反向代理方案

除了直接配置 CORS 响应头,还可以通过 Nginx 反向代理来解决跨域问题,这种方法可将跨域请求转为同域请求,规避浏览器同源策略,此方法在微服务架构中尤为常见。

2.2.1 Nginx 代理配置

在 Nginx 配置文件中添加以下代理规则:

server {listen 8080;server_name localhost;# 匹配以/api开头的URL路径location /api {# 将请求代理到本地4000端口的服务(注意:proxy_pass末尾是否添加斜杠会影响路径拼接)proxy_pass http://localhost:4000;# 常用代理配置项(传递客户端真实信息)proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

2.2.2 后端服务示例 (serverb.js)

使用 Express 框架创建一个简单的后端服务:

// serverb.js
const express = require('express');
const app = express();
const users = [{id:1, name:'张三'}];// 处理API请求(注意:接口路径需与Nginx代理规则匹配)
app.get('/api/users', (req, res) => {res.json(users);
});const port = 4000;
app.listen(port, () => {console.log(`后端服务运行在 http://localhost:${port}`);
});

2.2.3 前端通过代理请求数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nginx代理跨域示例</title>
</head>
<body><script>(async function () {try {// 通过Nginx代理访问后端服务const response = await fetch('http://localhost:8080/api/users', {method: 'GET',headers: {'Accept': 'application/json'}})const data = await response.json();console.log('通过代理获取的数据:', data);} catch (error) {console.error('代理请求出错:', error);}})();</script>
</body>
</html>

2.3 两种跨域方案对比

维度CORS 方案反向代理方案
核心原理浏览器基于响应头允许跨域将跨域请求转为同域请求
配置位置Nginx 响应头配置(add_headerNginx 代理规则配置(proxy_pass
适用场景前后端域名不同,需浏览器直接跨域前端与 Nginx 同域名,后端多服务部署
安全性需严格控制Allow-Origin,避免通配符前端无跨域风险,Nginx 可统一鉴权
性能影响存在预检请求(OPTIONS)额外开销无预检开销,性能更优
前端依赖需前端请求配合 CORS 规则(如凭据设置)前端无需特殊处理,按同域请求即可

本文系统介绍了 Nginx 在 Windows 环境下的基础操作,以及两种主流跨域解决方案:通过add_header配置 CORS 响应头和基于反向代理的跨域处理机制。在实际开发中,可依据项目场景灵活选择方案:

  • 当前后端域名不同且需浏览器直接访问跨域资源时,优先采用 CORS 方案,但需严格限定域名白名单,避免通配符滥用带来的安全风险。

  • 若项目采用微服务架构,或需要集中处理请求转发、负载均衡及缓存策略,反向代理方案更为高效 —— 它通过将跨域请求转换为同域请求,从根本上规避浏览器同源策略限制。

Nginx 凭借高性能与灵活配置特性,成为跨域问题的理想解决方案,同时在负载均衡、缓存优化等场景中也能发挥核心作用。实际使用时,建议养成定期备份配置文件的习惯,修改配置后通过nginx -t命令校验语法正确性,再通过nginx -s reload平滑重载配置,确保服务稳定运行。通过 Nginx 处理跨域问题,既能发挥其高并发处理优势,又能简化前后端架构设计,是现代 Web 开发中不可或缺的基础技术方案。

下一章将介绍 Node中间件 方案 ,敬请期待!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/87996.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/87996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++智能指针编程实例

智能指针是C11引入的重要特性&#xff0c;用于自动管理动态分配的内存&#xff0c;防止内存泄漏。下面介绍几种高级智能指针编程实例。 1. 共享所有权模式 (shared_ptr) 循环引用问题及解决方案 #include <memory> #include <iostream>class B; // 前向声明clas…

单元测试总结

一、测试方案: 单元测试方案应包括以下步骤: 1.理解代码结构:仔细阅读代码,理解程序的结构、逻辑和算法。 2.制定测试目标:明确你想要测试的功能和输出结果; 3.撰写测试用例:编写涵盖所有测试目标的测试用例; 4.执行测试:运行测试用例以验证功能的正确性; 5.编写报告:根据测试…

Spring面向切面编程AOP(2)

前置通知&#xff08;Before Advice&#xff09; 前置通知在目标方法执行之前被调用&#xff0c;常用于执行一些预处理逻辑&#xff0c;例如权限验证、参数校验等。在 Spring 配置文件中&#xff0c;前置通知通过<aop:before>标签进行配置&#xff0c;以下是一个典型的示…

设备故障预测与健康管理技术:从数据到决策的工业智能进化之路​

在工业 4.0 与智能制造浪潮的推动下&#xff0c;设备故障预测与健康管理&#xff08;Prognostics and Health Management, PHM&#xff09;技术已成为企业实现数字化转型的核心驱动力。据统计&#xff0c;制造业中设备非计划停机 1 小时的平均损失高达 25 万美元&#xff0c;而…

RabbitMQ从入门到实践:消息队列核心原理与典型应用场景

在现代应用开发中&#xff0c;系统各部分之间的通信至关重要。这就是像RabbitMQ这样的消息代理发挥作用的地方。无论您是在构建微服务架构、实现任务队列&#xff0c;还是开发实时聊天应用程序&#xff0c;RabbitMQ都可能成为改变游戏规则的工具。本文将深入探讨RabbitMQ是什么…

基于Spring Boot和Vue的网上军事论坛设计与实现

目录 一.&#x1f981;前言二.&#x1f981;开源代码与组件使用情况说明三.&#x1f981;核心功能1. ✅算法设计2. ✅Java开发语言3. ✅Redis数据库4. ✅部署项目 四.&#x1f981;演示效果1. 管理员模块1.1 用户管理1.2 内容审核1.3 权限分配1.4 菜单管理1.5 字典管理 2. 用户…

LLMs基础学习(八)强化学习专题(6)

LLMs基础学习&#xff08;八&#xff09;强化学习专题&#xff08;6&#xff09; 文章目录 LLMs基础学习&#xff08;八&#xff09;强化学习专题&#xff08;6&#xff09;深度强化学习&#xff08;DQN&#xff09;DQN 起源&#xff1a;《Playing Atari with Deep Reinforceme…

JVM(10)——详解Parallel垃圾回收器

Parallel 垃圾回收器&#xff08;也称为 吞吐量优先收集器&#xff09;。它是 Java 早期&#xff08;特别是 JDK 8 及之前&#xff09;在多核处理器上的默认垃圾回收器&#xff0c;其核心设计目标是最大化应用程序的吞吐量。 一、Parallel 回收器的定位与设计目标 核心目标&am…

MySQL(91)什么是分布式数据库?

分布式数据库是一种将数据存储在多个物理位置的数据库系统。这些位置可能分布在不同的服务器、数据中心甚至地理位置。分布式数据库系统允许数据的存储、处理和访问分布在多个节点上&#xff0c;以提高数据的可用性、可靠性、可扩展性和性能。 1. 分布式数据库的特点 1.1 数据…

Java事务失效(面试题)的常见场景

1. 方法非public修饰 原理&#xff1a; Spring AOP代理&#xff08;CGLIB或JDK动态代理&#xff09;默认无法拦截非public方法。 示例&#xff1a; Service public class UserService {Transactionalvoid updateUser() { // 非public方法// 事务不会生效&#xff01;} } 修…

GitHub 趋势日报 (2025年06月20日)

&#x1f4ca; 由 TrendForge 系统生成* | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 1810 data-engineer-handbook 373 n8n 295 anthropic-cookbook 291 automatisch…

qt常用控件--01

文章目录 qt常用控件--01上一篇文章的补充windowTitle属性windowIcon属性windowOpaCity属性cursor属性font属性结语 很高兴和大家见面&#xff0c;给生活加点impetus&#xff01;&#xff01;开启今天的编程之路&#xff01;&#xff01; 今天我们进一步c11中常见的新增表达 作…

C++ 中 string 类的解析及简易自我实现

目录 引言 标准库中的 string 类 功能概述 常见操作示例 自我实现简易 string 类 代码结构概述 1. String11.h 头文件 类的成员变量 迭代器相关 构造函数和析构函数 基本访问和修改方法 赋值运算符重载 内存管理和扩容 以下代码在.cpp文件中解析: 2. String11.…

计算机的性能指标(选择题0~1题无大题)

存储器的性能指标 总容量存储单元个数*存储字长 bit 例&#xff1a;MAR16位&#xff0c;MDR16位 总容量2的16次方*16bit 补充&#xff1a; n个二进制位就有2的n次方不同的状态 一般描述文件大小容量单位 2的10次方&#xff1a;K 2的20次方&#xff1a;M 2的…

React 核心原理与Fiber架构

目录 一、虚拟 DOM 二、Diffing 算法 三、Fiber 架构 四、渲染流程 1. Render 阶段&#xff08;可中断异步过程&#xff09; 2. Commit 阶段&#xff08;同步不可中断&#xff09; 五、时间切片&#xff08;Time Slicing&#xff09; 六、核心流程步骤总结 1. 状态更新…

【破局痛点,赋能未来】领码 SPARK:铸就企业业务永续进化的智慧引擎—— 深度剖析持续演进之道,引领数字化新范式

摘要 在瞬息万变的数字时代&#xff0c;企业对业务连续性、敏捷创新及高效运营的需求日益迫切。领码 SPARK 融合平台&#xff0c;秉持“持续演进”这一核心理念&#xff0c;以 iPaaS 与 aPaaS 为双擎驱动&#xff0c;深度融合元数据驱动、智能端口调度、自动化灰度切换、AI 智…

掌握C++核心特性

目标&#xff1a; 掌握C核心特性&#xff0c;为嵌入式开发打基础 好的&#xff0c;我来为你详细梳理一下 继承与多态、虚函数 相关的知识点&#xff0c;包括单继承、多继承、虚函数表机制、纯虚函数与抽象类、动态绑定。以下内容适合中等难度层次的理解&#xff0c;便于考试复…

python的高校教师资源管理系统

目录 技术栈介绍具体实现截图系统设计研究方法&#xff1a;设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示 技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理&#xff0c;难度适中&#xf…

Java Collections工具类:高效集合操作

Collections工具类概述 Collections是Java提供的集合操作工具类&#xff0c;位于java.util包中&#xff0c;包含大量静态方法&#xff0c;用于对List、Set、Map等集合进行排序、查找、替换、同步化等操作。 常用方法及代码示例 排序操作 sort(List<T> list)&#xff1a…

vue指令总结

vue指令总结 一、总述 二、代码实现&#xff08;内含大量注释&#xff09; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>vue入门</title><!-- 使用Vue 3官方CDN --><script src"https://unpkg.c…