Nginx 反向代理（解决跨域）
文章目录
- 前言
- 一、同源策略
- 二、跨域是什么？
- 三、Nginx解决跨域
- 1.前端示例代码
- 2.说明
- 四、nginx反向代理配置
- 五、启动nginx
- 六、最终效果
- 总结
前言
Nginx反向代理解决跨域
一、同源策略
- 定义：同源策略（Same-Origin Policy）是指浏览器限制一个源（origin）的文档或脚本如何与另一个源的资源进行交互的安全策略。源是由协议（如HTTP HTTPS）、域名（如example.com）和端口号（如80、443）组成的唯一标识。
- 原理：根据同源策略，如果两个资源的协议、域名和端口号完全相同，则它们被认为是同源的，可以相互访问和交互。否则，它们被认为是不同源的，浏览器会限制它们之间的交互，以防止恶意网站通过跨域请求获取用户的敏感信息或进行其他恶意操作。
二、跨域是什么？
跨域（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 反向代理（解决跨域）
文章目录 前言一、同源策略二、跨域是什么？三、Nginx解决跨域1.前端示例代码2.说明 四、nginx反向代理配置五、启动nginx六、最终效果总结 前言 Nginx反向代理解决跨域 一、同源策略 定义：同源策略（Same-Origin Policy）是指浏览…...
gRPC-4种通信模式
4种通信模式 1、简单模式（Simple RPC） 简单模式：也称简单 RPC，即客户端发起一次请求，服务端响应处理后返回一个结果给客户端。 在 proto 文件中可如下定义： rpc SayHello(HelloRequest) returns (Hello…...
第五项修炼—系统思考
感谢合作伙伴的推荐，圆满结束为期两天的马上消费《第五项修炼—系统思考》项目！这不仅是一次培训，更是未来实践的起点。 两天的系统思考学习让我们看到，在技术管理的每个决策背后，都蕴含着深刻的系统关联。希望各位技…...
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 文档可以通过多种库和方法实现。以下是几种常用的方法： 1. 使用 Apache POI Apache POI 是一个强大的库，可以用来读写 Microsoft Office 格…...
OceanBase V4.3.3，首个面向实时分析场景的GA版本发布
在10月23日举办的 OceanBase年度发布会 上，我们怀着激动之情，正式向大家宣布了 OceanBase 4.3.3 GA 版的正式发布，这也是OceanBase 为实时分析（AP）场景打造的首个GA版本。 2024 年初，我们推出了 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.题目：给定一个仅包含小写字母的字符串，求它的最长回文子串的长度。 最长回文子串__牛客网 2.算法原理： <1>动态规划算法:O(n^2),O(n^2) 具有通性，凡涉及回文子串的问题都可利用此法解决 知识储备&am…...
AG32的3个ADC可以并联使用吗
AG32的3个ADC可以并联使用吗？ Customer: 需求： 在t1时间段，用5M的速度ch1通道采样得到结果1. 在t2时间段，用5M的速度ch2通道采样得到结果2. 在t3时间段，用5M的速度ch3通道采样得到结果3. 然后如此循环 。 考虑用3…...
什么是 OpenTelemetry？
OpenTelemetry 定义 OpenTelemetry (OTel) 是一个开源可观测性框架，允许开发团队以单一、统一的格式生成、处理和传输遥测数据（telemetry data）。它由云原生计算基金会 (CNCF) 开发，旨在提供标准化协议和工具，用于收集…...
[vulnhub]DC:7
https://www.vulnhub.com/entry/dc-7,356/ 端口扫描主机发现 探测存活主机，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，服务器中的 “潘多拉魔盒”
个性化十足的贵族服务器，惠普ML310e Gen8，服务器中的 “潘多拉魔盒” 小伙伴们大家好呀，这里是勤奋的凯尔森同学，今天给大家分享一款好玩的服务器，惠普ML310e Gen8 V2，相比大家都很熟悉HP ProLiant MicroS…...
百度社招内推
百度社招内推 「百度内推」快来投递你心仪的职位吧（ 网申链接地址：https://dwz.cn/ah4OUcca），填入内推码，完成投递，get内推绿色通道~我的内推码：IZ9PVH 内推有什么好处： 简历直达…...
本地部署开源在线即时通讯软件Fiora打造个人私密聊天室
文章目录 前言1.关于Fiora2.安装Docker3.本地部署Fiora4.使用Fiora5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 相信大家在聊天时候总是很没安全感，比如在和小姐妹背着男朋友聊一些不能说的坏话，或者背着女朋友和兄…...
TS（类 接口 泛型）
文章目录 类复习相关知识属性修饰符public 修饰符属性的简写形式 protected修饰符private修饰符readonly修饰符 抽象类 接口（interface）定义类结构定义对象结构定义函数结构接口之间的继承接口自动合并 （可重复定义）一些相似的概念…...
docker 启动 neo4j
docker 启动 neo4j 1. 启动2. 导入数据 1. 启动 运行下面命令启动 neo4j， 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分支语句和取余、整除操作练习。比较简单。 题目题解详见：https://www.coderli.com/gesp-1-bcqm3092/ 【GESP】C一级练习BCQM3092，双面打印 | OneCoderGESP一级知识点if分支语句和取余、整除操作练习。比较简单。https://www.coderli.…...
mysql--多表查询
一、联合查询 作用：合并结果集就是把两个select语句的查询结果合并到一起！ 合并结果集有两种方式： UNION：合并并去除重复记录，例如：SELECT * FROM t1 UNION SELECT * FROM t2； UNION ALL&a…...
RHCE-Web-nginx http实验和nginx https实验
一、web服务器简介 （1）什么是www www 是 world wide web 的缩写，也就是全球信息广播的意思。通常说的上网就是使用 www 来查询用户 所需要的信息。 www 可以结合文字、图形、影像以及声音等多媒体，并通过可以让鼠标单击超链接的…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
在 Spring Boot 中使用 JSP
jsp？ 好多年没用了。重新整一下 还费了点时间，记录一下。 项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...
客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...
FTXUI::Dom 模块
DOM 模块定义了分层的 FTXUI::Element 树，可用于构建复杂的终端界面，支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...