当前位置: 首页 > news >正文

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-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-HeadersAccess-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-Credentialstrue

  • Access-Control-Allow-Methods:指定允许的 HTTP 请求方法,如 GETPOSTOPTIONSPUTDELETE 等。可以根据实际需要设置。

  • Access-Control-Allow-Headers:指定允许客户端发送的自定义 HTTP 头部,如 AuthorizationContent-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 配置,并在需要的 serverlocation 块中包含此文件:

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.comwww.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数据库时间的对应格式

前端&#xff1a; <el-date-pickerv-model"formInline.startTime"type"date"value-format"yyyy-MM-dd"placeholder"选择日期"> </el-date-picker> 后端&#xff1a; private String startTime; private String endTime…...

一周学会Flask3 Python Web开发-WTForms表单验证

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 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游戏开发中&#xff0c;网格简化&#xff08;Mesh Simplification&#xff09;和LOD&#xff08;Level of Detail&#xff09;技术是优化渲染性能的关键手段&#xff0c;尤其在处理复杂场景和高精度模型时至关重要。以下是一套系统的实现方案与优化策略&#xff1a; 一、…...

基于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# | 委托 | 事件 | 异步

委托&#xff08;Delegate&#xff09;和事件&#xff08;Event&#xff09; 在C#和C中&#xff0c;委托&#xff08;Delegate&#xff09;与事件&#xff08;Event&#xff09;以及函数对象&#xff08;Function Object&#xff09;是实现回调机制或传递行为的重要工具。虽然…...

数据结构——顺序表与链表

1. 基础介绍 1、线性结构&#xff1a; 如果一个数据元素序列满足&#xff1a; &#xff08;1&#xff09;除第一个和最后一个数据元素外&#xff0c;每个数据元素只有一个前驱数据元素和一个后继数据元素&#xff1b; &#xff08;2&#xff09;第一个数据元素没有前驱数据…...

【uniapp】图片添加canvas水印

目录 需求&背景实现地理位置添加水印 ios补充 需求&背景 需求&#xff1a;拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。 效果图&#xff1a; 方案&#xff1a;使用canvas添加水印。 具体实现&#xff1a;上传图片组件是项目里现有的&#xff…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 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.找到字符串中所有字母异位词

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

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; 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 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

Qt的学习(一)

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