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

Nginx 反向代理（解决跨域）

news 2026/2/10 21:23:55

文章目录

  • 前言
  • 一、同源策略
  • 二、跨域是什么？
  • 三、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;是指浏览…...

编程日记 2024/11/4 13:57:42

gRPC-4种通信模式

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

编程日记 2024/11/4 13:56:41

第五项修炼—系统思考

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

编程日记 2024/11/4 13:55:39

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 读取帧…...

编程日记 2024/11/4 13:50:32

Java导出Word文档的几种方法

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

编程日记 2024/11/4 13:49:30

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 版本…...

编程日记 2024/11/4 13:46:25

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_版本…...

编程日记 2024/11/4 13:44:23

牛客题目解析

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

编程日记 2024/11/4 13:42:20

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…...

编程日记 2024/11/4 13:40:17

什么是 OpenTelemetry？

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

编程日记 2024/11/4 13:39:16

[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…...

编程日记 2024/11/4 13:37:14

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

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

编程日记 2024/11/4 13:36:13

百度社招内推

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

编程日记 2024/11/4 13:35:11

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

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

编程日记 2024/11/4 13:34:09

TS（类 接口 泛型）

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

编程日记 2024/11/4 13:33:08

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 …...

编程日记 2024/11/4 13:32:07

OPENAI官方prompt文档解析

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

编程日记 2024/11/4 13:31:06

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

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

编程日记 2024/11/4 13:30:05

mysql--多表查询

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

编程日记 2024/11/4 13:28:02

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

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

编程日记 2024/11/4 13:27:01

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/8 20:42:58

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2026/2/9 17:44:07

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2026/2/7 1:08:45

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2026/2/4 13:29:03