Nginx解决前端跨域问题
1. 理解 CORS 和同源策略
1.1 同源策略
同源策略是一种浏览器安全机制,用于阻止不同源(不同域名、协议或端口)的 Web 应用相互访问数据。它确保了 Web 应用的隔离性,防止恶意网站访问用户数据或执行不安全的操作。
同源策略下,同一个域(相同的协议、域名和端口)内的资源可以自由访问。但如果协议、域名或端口有任何不同,浏览器会阻止这种访问。
1.2 跨域资源共享 (CORS)
CORS(Cross-Origin Resource Sharing,跨域资源共享)是 W3C 标准,用于解决跨域访问问题。通过 CORS,服务器可以声明哪些来源的请求是被允许的,以及允许客户端通过哪些 HTTP 方法和头部进行访问。
CORS 的实现依赖于服务器返回的特定 HTTP 头信息,这些头信息指导浏览器允许或拒绝特定的跨域请求。
2. Nginx 解决跨域问题的基本原理
Nginx 可以通过配置 HTTP 响应头来支持 CORS。这些头信息包括 Access-Control-Allow-Origin
、Access-Control-Allow-Methods
、Access-Control-Allow-Headers
和 Access-Control-Allow-Credentials
等。通过在 Nginx 中配置这些头信息,可以允许特定的域、方法和头部进行跨域访问。
3. 配置 Nginx 解决跨域问题
下面是如何在 Nginx 中配置 CORS 的具体步骤。
3.1 基础配置
假设我们有一个 API 服务器,域名为 api.example.com
,需要允许来自 www.example.com
的前端应用进行跨域请求。
首先,找到或创建 Nginx 的配置文件(通常位于 /etc/nginx/nginx.conf
或 /etc/nginx/conf.d/
目录中),然后在需要跨域的服务器块(server
块)或位置块(location
块)中添加 CORS 相关的头部配置。
server {listen 80;server_name api.example.com;location / {# 设置允许跨域的域名,可以使用通配符 '*' 允许所有域访问add_header 'Access-Control-Allow-Origin' 'http://www.example.com';# 设置允许的 HTTP 方法add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';# 设置允许的请求头add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';# 如果需要支持 cookie,可以设置以下 headeradd_header 'Access-Control-Allow-Credentials' 'true';# 如果是预检请求(OPTIONS 请求),则直接返回 204 状态码if ($request_method = 'OPTIONS') {return 204;}# 其他正常请求的处理逻辑proxy_pass http://backend_server;}
}
3.2 关键配置项详解
-
Access-Control-Allow-Origin
:指定允许跨域请求的来源。可以设置为具体的域名(如http://www.example.com
),或使用通配符*
允许所有来源。使用通配符时,不允许设置Access-Control-Allow-Credentials
为true
。 -
Access-Control-Allow-Methods
:指定允许的 HTTP 请求方法,如GET
、POST
、OPTIONS
、PUT
、DELETE
等。可以根据实际需要设置。 -
Access-Control-Allow-Headers
:指定允许客户端发送的自定义 HTTP 头部,如Authorization
、Content-Type
等。此配置项通常用于支持复杂请求(带自定义头部的请求)。 -
Access-Control-Allow-Credentials
:如果客户端请求包括凭据(如 Cookies),则该选项必须设置为true
。注意,此时Access-Control-Allow-Origin
不能为*
,必须为具体的域名。 -
预检请求的处理:浏览器在发送某些复杂请求之前,会发送一个
OPTIONS
请求进行预检,询问服务器是否允许该请求。Nginx 可以在检测到OPTIONS
请求时,直接返回状态码204
,表示请求被允许,但不包含任何内容。
3.3 配置通配符
在某些场景中,如果需要允许所有域访问(即不限制跨域请求的来源),可以将 Access-Control-Allow-Origin
设置为 *
:
add_header 'Access-Control-Allow-Origin' '*';
需要注意的是,使用通配符时,不能同时启用 Access-Control-Allow-Credentials
,否则浏览器会拒绝请求。
3.4 动态设置 CORS 头
如果需要根据请求动态设置 Access-Control-Allow-Origin
,可以使用 $http_origin
变量来匹配请求来源。例如:
location / {if ($http_origin ~* 'https?://(www.)?(example1.com|example2.com)') {add_header 'Access-Control-Allow-Origin' "$http_origin";add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept';}if ($request_method = 'OPTIONS') {return 204;}proxy_pass http://backend_server;
}
这种配置可以在满足特定条件时,动态地允许多个域名进行跨域访问。
4. 预检请求与 OPTIONS 方法的处理
预检请求是 CORS 规范中定义的一种机制,用于在实际请求之前探测服务器是否允许某个跨域请求。浏览器在发送某些复杂请求时,会首先发送一个 OPTIONS
请求,询问服务器是否允许该请求。
Nginx 可以通过简单的配置处理这种预检请求:
if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';return 204;
}
这段配置会在收到 OPTIONS
请求时,返回一个 204 No Content
响应,并带有必要的 CORS 头部信息,表明服务器允许接下来的实际请求。
5. 实践中的注意事项
5.1 安全性考虑
虽然 CORS 是解决跨域问题的有效手段,但不应随意允许所有域访问(即设置 Access-Control-Allow-Origin
为 *
)。这种配置可能会引发安全隐患,因为任何来源的脚本都可以访问资源。因此,在配置时应明确指定允许的来源,并严格控制跨域访问的权限。
5.2 性能优化
CORS 请求处理会增加服务器的负载,特别是在预检请求频繁的情况下。为了减少性能开销,可以通过以下方法进行优化:
- 启用缓存:通过设置
Access-Control-Max-Age
头,可以让浏览器缓存预检请求的结果,减少实际请求前的预检次数。 - 合并请求:在可能的情况下,减少跨域请求的数量,避免不必要的预检请求。
5.3 配置管理
在生产环境中管理 Nginx 配置时,建议将 CORS 相关的配置与其他配置分开管理。例如,可以在 Nginx 的配置文件中创建一个单独的文件来管理 CORS 配置,并在需要的 server
或 location
块中包含此文件:
include /etc/nginx/cors.conf;
这种方式可以使配置更清晰、更易于管理。
6. 示例场景与配置示例
6.1 单页应用与 API 后端
假设有一个单页应用(SPA)部署在 www.example.com
,它通过 Ajax 请求从 api.example.com
获取数据。Nginx 的配置可以如下:
server {listen 80;server_name api.example.com;location /api/ {add_header 'Access-Control-Allow-Origin' 'http://www.example.com';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';if ($request_method = 'OPTIONS') {return 204;}proxy_pass http://backend_api_server;}
}
6.2 支持多个域名的跨域访问
如果需要支持来自多个域名的跨域请求,例如 www.example1.com
和 www.example2.com
,可以使用如下配置:
location /api/ {if ($http_origin ~* 'https?://(www.example1.com|www.example2.com)') {add_header 'Access-Control-Allow-Origin' "$http_origin";add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';}if ($request_method = 'OPTIONS') {return 204;}proxy_pass http://backend_api_server;
}
7. 总结
通过 Nginx 配置 CORS 头部信息,可以有效解决前端跨域问题,允许前端应用从不同的域名、协议或端口请求资源。在配置过程中,需要仔细考虑安全性、性能优化和管理的易用性,以确保跨域请求的安全和高效处理。Nginx 强大的配置能力使其能够灵活应对各种跨域需求,为前端应用提供强有力的支持。
相关文章:
Nginx解决前端跨域问题
1. 理解 CORS 和同源策略 1.1 同源策略 同源策略是一种浏览器安全机制,用于阻止不同源(不同域名、协议或端口)的 Web 应用相互访问数据。它确保了 Web 应用的隔离性,防止恶意网站访问用户数据或执行不安全的操作。 同源策略下&…...

ReferenceError: assignment to undeclared variable xxx
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

国产编辑器EverEdit - 宏功能介绍
1 宏 1.1 应用场景 宏是一种重复执行简单工作的利器,可以让用户愉快的从繁琐的工作中解放出来,其本质是对键盘和菜单的操作序列的录制,并不会识别文件的内容,属于无差别无脑执行。 特别是对一些有规律的重复按键动作,…...

图像滑块对比功能的开发记录
背景介绍 最近,公司需要开发一款在线图像压缩工具,其中的一个关键功能是让用户直观地比较压缩前后的图像效果。因此,我们设计了一个对比组件,它允许用户通过拖动滑块,动态调整两张图像的显示区域,从而清晰…...
【计算机网络】Socket
Socket 是网络通信的核心技术之一,充当应用程序与网络协议栈之间的接口。 1. Socket 定义 Socket(套接字)是操作系统提供的 网络通信抽象层,允许应用程序通过标准接口(如 TCP/IP 或 UDP)进行数据传输。它…...
Electron应用中获取设备唯一ID和系统信息
让我创建一篇关于如何在Electron应用中获取设备唯一ID和系统信息,并在登录时使用这些信息的博客文章。我将确保步骤明确、条理清晰,适合初学者和有经验的开发者。 这篇博客应包含以下部分: 介绍 - 为什么需要获取设备信息前提条件和安装依赖…...

文件上传漏洞:upload-labs靶场11-20
目录 pass-11 pass-12 pass-13 pass-14 pass-15 pass-16 pass-17 pass-18 pass-19 pass-20 pass-11 分析源代码 ,发现上传文件的存放路径可控 if(isset($_POST[submit])){$ext_arr array(jpg,png,gif);$file_ext substr($_FILES[upload_file][name],st…...

国产化板卡设计原理图:2330-基于FMC接口的JFM7K325T PCIeX4 3U PXIe接口卡
基于FMC接口的JFM7K325T PCIeX4 3U PXIe接口卡 一、板卡概述 本板卡基于 FPGAJFM7K325T 芯片,pin_to_pin兼容FPGAXC7K410T-2FFG900 ,支持PCIeX8、64bit DDR3容量2GByte,HPC的FMC连接器,板卡支持PXIE标准协议,其中XJ3…...

使用Open WebUI下载的模型文件(Model)默认存放在哪里?
🏡作者主页:点击! 🤖Ollama部署LLM专栏:点击! ⏰️创作时间:2025年2月21日21点21分 🀄️文章质量:95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下…...

FPGA 配置原理
用户编程控制的FPGA 是通过加载比特位流配置内部的存储单元实现的。该存储单元就是所谓的配置单元,它必须在器件上电后进行配置,从而设置查找表(LUT)的属性、连线方式、IOB 电压标准和其它的用户设计。 1.配置帧 以Xilinx 公司的…...

企业级虚拟化数据库基础平台自动化部署项目
一、项目简介及准备工作 1.1.虚拟化平台简介 1.1.1.ESXi 8 是什么? 定义: ESXi 8 是 VMware 推出的最新版本 裸机虚拟化管理程序(Hypervisor),属于 VMware vSphere 产品线的核心组件。 核心功能: 在物理…...
关于elementui的时间组件与后端时间和oracle数据库时间的对应格式
前端: <el-date-pickerv-model"formInline.startTime"type"date"value-format"yyyy-MM-dd"placeholder"选择日期"> </el-date-picker> 后端: private String startTime; private String endTime…...

一周学会Flask3 Python Web开发-WTForms表单验证
锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们可以通过WTForms表单类属性的validators属性来实现表单验证。 常用的WTForms验证器 验证器说明DataRequired(messageNo…...

qt open3dBPA重建
qt open3dBPA重建 效果展示二、流程三、代码效果展示 二、流程 创建动作,链接到槽函数,并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionBPA_triggered();//bpa重建 void MainWindow::...
Unity游戏开发中的网格简化与LOD技术(Mesh Simplification LOD)
在Unity游戏开发中,网格简化(Mesh Simplification)和LOD(Level of Detail)技术是优化渲染性能的关键手段,尤其在处理复杂场景和高精度模型时至关重要。以下是一套系统的实现方案与优化策略: 一、…...

基于YOLO11深度学习的运动品牌LOGO检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

纯html文件实现目录和文档关联
目录结构 效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>项目结题报告</title><style lang"scss">::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scro…...
C# | 委托 | 事件 | 异步
委托(Delegate)和事件(Event) 在C#和C中,委托(Delegate)与事件(Event)以及函数对象(Function Object)是实现回调机制或传递行为的重要工具。虽然…...

数据结构——顺序表与链表
1. 基础介绍 1、线性结构: 如果一个数据元素序列满足: (1)除第一个和最后一个数据元素外,每个数据元素只有一个前驱数据元素和一个后继数据元素; (2)第一个数据元素没有前驱数据…...

【uniapp】图片添加canvas水印
目录 需求&背景实现地理位置添加水印 ios补充 需求&背景 需求:拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。 效果图: 方案:使用canvas添加水印。 具体实现:上传图片组件是项目里现有的ÿ…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤: 第一步: 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为: // 改为 v…...

Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发(电脑上写的程序)涉及到的一套技术Qt无法开发网页前端,也不能开发移动应用。 客户端开发的重要任务:编写和用户交互的界面。一般来说和用户交互的界面,有两种典型风格&…...