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

Nginx 反向代理(解决跨域)

文章目录

  • 前言
  • 一、同源策略
  • 二、跨域是什么?
  • 三、Nginx解决跨域
    • 1.前端示例代码
    • 2.说明
  • 四、nginx反向代理配置
  • 五、启动nginx
  • 六、最终效果
  • 总结


前言

Nginx反向代理解决跨域

一、同源策略

  1. 定义:同源策略(Same-Origin Policy)是指浏览器限制一个源(origin)的文档或脚本如何与另一个源的资源进行交互的安全策略。源是由协议(如HTTP HTTPS)、域名(如example.com)和端口号(如80、443)组成的唯一标识。
  2. 原理:根据同源策略,如果两个资源的协议、域名和端口号完全相同,则它们被认为是同源的,可以相互访问和交互。否则,它们被认为是不同源的,浏览器会限制它们之间的交互,以防止恶意网站通过跨域请求获取用户的敏感信息或进行其他恶意操作。

二、跨域是什么?

‌‌跨域(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启动即可

在这里插入图片描述

在这里插入图片描述

六、最终效果

发现我们后端请求就成功了。
在这里插入图片描述

总结

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

相关文章:

Nginx 反向代理(解决跨域)

文章目录 前言一、同源策略二、跨域是什么&#xff1f;三、Nginx解决跨域1.前端示例代码2.说明 四、nginx反向代理配置五、启动nginx六、最终效果总结 前言 Nginx反向代理解决跨域 一、同源策略 定义&#xff1a;同源策略&#xff08;Same-Origin Policy&#xff09;是指浏览…...

gRPC-4种通信模式

4种通信模式 1、简单模式&#xff08;Simple RPC&#xff09; 简单模式&#xff1a;也称简单 RPC&#xff0c;即客户端发起一次请求&#xff0c;服务端响应处理后返回一个结果给客户端。 在 proto 文件中可如下定义&#xff1a; rpc SayHello(HelloRequest) returns (Hello…...

第五项修炼—系统思考

感谢合作伙伴的推荐&#xff0c;圆满结束为期两天的马上消费《第五项修炼—系统思考》项目&#xff01;这不仅是一次培训&#xff0c;更是未来实践的起点。 两天的系统思考学习让我们看到&#xff0c;在技术管理的每个决策背后&#xff0c;都蕴含着深刻的系统关联。希望各位技…...

PYNQ 框架 - VDMA驱动 - 帧缓存

目录 1. 简介 2. 代码分析 2.1 _FrameCache 类定义 2.1.1 xlnk.cma_array() 2.1.2 pointerNone 2.1.3 PynqBuffer 2.2 _FrameCache 例化与调用 2.3 _FrameCache 测试 2.4 _FrameList 类定义 2.5 _FrameList 例化与调用 2.6 _FrameList 测试 3. 帧的使用 3.1 读取帧…...

Java导出Word文档的几种方法

文章目录 1. 使用 Apache POI2. 使用 Docx4j3. 使用 JODConverter4. 使用 FreeMarker 模板 在 Java 中导出 Word 文档可以通过多种库和方法实现。以下是几种常用的方法&#xff1a; 1. 使用 Apache POI Apache POI 是一个强大的库&#xff0c;可以用来读写 Microsoft Office 格…...

OceanBase V4.3.3,首个面向实时分析场景的GA版本发布

在10月23日举办的 OceanBase年度发布会 上&#xff0c;我们怀着激动之情&#xff0c;正式向大家宣布了 OceanBase 4.3.3 GA 版的正式发布&#xff0c;这也是OceanBase 为实时分析&#xff08;AP&#xff09;场景打造的首个GA版本。 2024 年初&#xff0c;我们推出了 4.3.0 版本…...

Maven随笔

文章目录 1、什么是MAVEN2、Maven模型3、Maven仓库4、项目集成1_Idea集成Maven设置2_创建Maven项目3_POM配置详解4_maven 坐标详情5_Maven工程类型6_导入Maven项目 5、依赖管理1_依赖配置2_依赖传递3_可选依赖4_排除依赖4_可选依赖和排除依赖的区别5_依赖范围6_继承与聚合7_版本…...

牛客题目解析

一.最长回文子串 1.题目&#xff1a;给定一个仅包含小写字母的字符串&#xff0c;求它的最长回文子串的长度。 最长回文子串__牛客网 2.算法原理&#xff1a; <1>动态规划算法:O(n^2),O(n^2) 具有通性&#xff0c;凡涉及回文子串的问题都可利用此法解决 知识储备&am…...

AG32的3个ADC可以并联使用吗

AG32的3个ADC可以并联使用吗&#xff1f; Customer: 需求&#xff1a; 在t1时间段&#xff0c;用5M的速度ch1通道采样得到结果1. 在t2时间段&#xff0c;用5M的速度ch2通道采样得到结果2. 在t3时间段&#xff0c;用5M的速度ch3通道采样得到结果3. 然后如此循环 。 考虑用3…...

什么是 OpenTelemetry?

OpenTelemetry 定义 OpenTelemetry (OTel) 是一个开源可观测性框架&#xff0c;允许开发团队以单一、统一的格式生成、处理和传输遥测数据&#xff08;telemetry data&#xff09;。它由云原生计算基金会 (CNCF) 开发&#xff0c;旨在提供标准化协议和工具&#xff0c;用于收集…...

[vulnhub]DC:7

https://www.vulnhub.com/entry/dc-7,356/ 端口扫描主机发现 探测存活主机&#xff0c;178是靶机 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-03 13:30 CST Nmap scan report for 192.168.75.1 Host is up (0.00037s l…...

个性化十足的贵族服务器,惠普ML310e Gen8,服务器中的 “潘多拉魔盒”

个性化十足的贵族服务器&#xff0c;惠普ML310e Gen8&#xff0c;服务器中的 “潘多拉魔盒” 小伙伴们大家好呀&#xff0c;这里是勤奋的凯尔森同学&#xff0c;今天给大家分享一款好玩的服务器&#xff0c;惠普ML310e Gen8 V2&#xff0c;相比大家都很熟悉HP ProLiant MicroS…...

百度社招内推

百度社招内推 「百度内推」快来投递你心仪的职位吧&#xff08; 网申链接地址&#xff1a;https://dwz.cn/ah4OUcca&#xff09;&#xff0c;填入内推码&#xff0c;完成投递&#xff0c;get内推绿色通道~我的内推码&#xff1a;IZ9PVH 内推有什么好处&#xff1a; 简历直达…...

本地部署开源在线即时通讯软件Fiora打造个人私密聊天室

文章目录 前言1.关于Fiora2.安装Docker3.本地部署Fiora4.使用Fiora5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 相信大家在聊天时候总是很没安全感&#xff0c;比如在和小姐妹背着男朋友聊一些不能说的坏话&#xff0c;或者背着女朋友和兄…...

TS(类 接口 泛型)

文章目录 类复习相关知识属性修饰符public 修饰符属性的简写形式 protected修饰符private修饰符readonly修饰符 抽象类 接口&#xff08;interface&#xff09;定义类结构定义对象结构定义函数结构接口之间的继承接口自动合并 &#xff08;可重复定义&#xff09;一些相似的概念…...

docker 启动 neo4j

docker 启动 neo4j 1. 启动2. 导入数据 1. 启动 运行下面命令启动 neo4j&#xff0c; docker run \-d \--restartalways \--publish7474:7474 --publish7687:7687 \--volume$HOME/neo4j-4.4.38/data:/data \--name neo4j-apoc-4.4.38 \-e NEO4J_dbms_allow__upgradetrue \-e …...

OPENAI官方prompt文档解析

官方文档地址:https://platform.openai.com/docs/guides/gpt-best-practices 文档中文版来源:OpenAI 官方提示工程指南 [译] | 宝玉的分享 (baoyu.io) 1.写清楚说明 如果prompt给的范围十分模糊或是过于宽泛,那么GPT就会开始猜测您想要的内容,从而导致生成的结果偏离预期. …...

【GESP】C++一级练习BCQM3092,双面打印

GESP一级知识点if分支语句和取余、整除操作练习。比较简单。 题目题解详见&#xff1a;https://www.coderli.com/gesp-1-bcqm3092/ 【GESP】C一级练习BCQM3092&#xff0c;双面打印 | OneCoderGESP一级知识点if分支语句和取余、整除操作练习。比较简单。https://www.coderli.…...

mysql--多表查询

一、联合查询 作用&#xff1a;合并结果集就是把两个select语句的查询结果合并到一起&#xff01; 合并结果集有两种方式&#xff1a; UNION&#xff1a;合并并去除重复记录&#xff0c;例如&#xff1a;SELECT * FROM t1 UNION SELECT * FROM t2&#xff1b; UNION ALL&a…...

RHCE-Web-nginx http实验和nginx https实验

一、web服务器简介 &#xff08;1&#xff09;什么是www www 是 world wide web 的缩写&#xff0c;也就是全球信息广播的意思。通常说的上网就是使用 www 来查询用户 所需要的信息。 www 可以结合文字、图形、影像以及声音等多媒体&#xff0c;并通过可以让鼠标单击超链接的…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...