当前位置: 首页 > 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…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...