nginx代理本地服务请求，避免跨域；前端图片压缩并上传
痛点
有时用vscode进行一些测试 请求不同端口服务、或者其他服务接口时时，老是会报跨域，非常的烦
所有就想用 nginx 进行请求代理，来解决这个痛点
nginx
下载地址：nginx: download
下载到某一目录：
window下nginx相关命令
//检查 Nginx 配置文件语法是否正确
nginx -t//启动 Nginx 服务
start nginx//停止 Nginx 服务
nginx -s stop//快速关闭并启动 Nginx 服务，用于重新加载配置文件
nginx -s reopennginx相关配置
D:\ZDS\nginx\nginx-1.24.0\conf 目录下的nginx.conf
worker_processes 1;events {worker_connections 1024;
}http {sendfile on;keepalive_timeout 65;server {listen 80;server_name 127.0.0.1;location /service/ {proxy_pass http://127.0.0.1:8080;proxy_set_header Host $proxy_host;}location / {proxy_pass http://127.0.0.1:5501/documentEdit/3.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}}
配置说明：
nginx监听本地http://127.0.0.1/服务 80端口，如果用户访问这个服务端口，会默认代理到http://127.0.0.1:5501/documentEdit/3 .html 服务，也就是打开这个服务，然后在这个服务中，如果请求url中有 ’service‘ 这个字段，那么这个url请求 就会被代理到http://127.0.0.1:8080 接口服务
例如，在5501的服务中，用ajax请求url为：
http://127.0.0.1/service/h5/engin?type=3&projId=13025
那么经过代理就会成为：
http://localhost:8080/service/h5/engin?type=3&projId=13025
配置详情：
worker_processes 1;
这个指令设置了 Nginx 启动时用于处理请求的工作进程数量。在这里，设定为 1 个工作进程
events { ... }：
这个块中配置了关于连接处理的一些参数，包括 worker_connections，它定义了每个工作进程可以同时处理的最大连接数
http { ... }：
这是 HTTP 服务器的主要配置块，包括全局的 HTTP 相关设置
endfile on; 和 keepalive_timeout 65;：
sendfile on; 开启了文件的高效传输模式，在支持 sendfile 的系统上，可以直接在磁盘和网络之间传输数据，而不需要在用户空间和内核空间之间来回拷贝。
keepalive_timeout 65; 设置了 keepalive 连接的超时时间，即客户端与服务器的长连接的超时时间
server { ... }：
这是定义一个 HTTP 服务器的块，在这里配置了该服务器的监听地址、名称等信息
listen 80; 和 server_name 127.0.0.1;：
listen 80; 定义了服务器监听的端口号。
server_name 127.0.0.1; 指定了该服务器的域名或 IP 地址
location /service/ { ... } 和 location / { ... }：
location /service/ { ... } 定义了对应 URL 路径的请求转发规则，这里将以 "/service/" 开头的请求转发到本地的端口 8080。
location / { ... } 定义了根路径 "/" 的请求转发规则，将请求转发到本地的端口 5501，并指定了具体的页面 "/documentEdit/3.html"。
error_page 500 502 503 504 /50x.html; 和 location = /50x.html { ... }：
这里定义了当出现 500、502、503、504 错误时显示的错误页面，并指定了该错误页面的路径。
配置完之后运行 start nginx 命令，然后打开http://127.0.0.1/ ，看能不能成功加载页面出来，如果成功加载出来了，说明配置成功
nginx踩坑
要在 server_name 127.0.0.1 监听的服务中加载到我们需要请求代理的页面，也就是加载到vscode用Live Server运行起来的服务，这样才能进行代理
前端图片压缩并上传
前端进行图片压缩，然后添加到formData中，上传到后台服务
base64转Blob
// 数据 URL 转换为 Blob 对象function dataURLtoBlob(dataURL) {// 使用 atob 函数解码 base64 编码的部分，split(',')[1] 用于获取逗号后的部分，即去掉 data:image/jpeg;base64, 中前面描述图片类型的部分，只留下实际的 base64 编码数据var byteString = atob(dataURL.split(',')[1]);// 用于存储二进制数据var ab = new ArrayBuffer(byteString.length);// 创建了一个无符号 8 位整型数组，引用了上面创建的 ArrayBuffer，用于处理二进制数据var ia = new Uint8Array(ab);// 将 base64 编码转换成二进制数据for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}// 使用 ArrayBuffer 创建了一个新的 Blob 对象，表示了转换后的图像数据，并指定了其类型为 image/jpegreturn new Blob([ab], { type: 'image/jpeg' });}完整代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片上传和压缩</title>
</head><body><input type="file" id="uploadInput" accept="image/*"><canvas id="canvas"></canvas><button onclick="compressAndUpload()">压缩并上传</button><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>// 获取相关DOM元素var uploadInput = document.getElementById('uploadInput');var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');// 监听文件选择事件uploadInput.addEventListener('change', function () {var file = uploadInput.files[0]; // 获取用户选择的文件var reader = new FileReader();// 文件读取完成时触发reader.onload = function (event) {var img = new Image();img.onload = function () {// 将图片绘制到canvas上var width = img.width;var height = img.height;var ratio = 1;// 若图片宽度或高度超过500像素，则进行压缩if (width > 500 || height > 500) {if (width > height) {ratio = 500 / width;} else {ratio = 500 / height;}}canvas.width = width * ratio;canvas.height = height * ratio;ctx.drawImage(img, 0, 0, canvas.width, canvas.height);// 数据 URL 转换为 Blob 对象function dataURLtoBlob(dataURL) {// 使用 atob 函数解码 base64 编码的部分，split(',')[1] 用于获取逗号后的部分，即去掉 data:image/jpeg;base64, 中前面描述图片类型的部分，只留下实际的 base64 编码数据var byteString = atob(dataURL.split(',')[1]);// 用于存储二进制数据var ab = new ArrayBuffer(byteString.length);// 创建了一个无符号 8 位整型数组，引用了上面创建的 ArrayBuffer，用于处理二进制数据var ia = new Uint8Array(ab);// 将 base64 编码转换成二进制数据for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}// 使用 ArrayBuffer 创建了一个新的 Blob 对象，表示了转换后的图像数据，并指定了其类型为 image/jpegreturn new Blob([ab], { type: 'image/jpeg' });}// 输出压缩后的图片数据var compressedData = canvas.toDataURL('image/jpg', 1); // 压缩质量为0.7var formData = new FormData();var blob = dataURLtoBlob(compressedData);formData.append('image', blob, 'image.jpg');$.ajax({url: 'http://127.0.0.1:80/service/h5/engin?type=3&projId=13025',type: 'POST',data: formData,processData: false,contentType: false,success: function (response) {response = JSON.parse(response)},error: function (xhr, status, error) {console.error(error);}});}img.src = event.target.result;}reader.readAsDataURL(file); // 以DataURL格式读取文件});</script>
</body></html>相关文章：
nginx代理本地服务请求，避免跨域；前端图片压缩并上传
痛点 有时用vscode进行一些测试 请求不同端口服务、或者其他服务接口时时，老是会报跨域，非常的烦 所有就想用 nginx 进行请求代理，来解决这个痛点 nginx 下载地址：nginx: download 下载到某一目录： window下nginx相关…...
Vue3-readonly(深只读) 与 shallowReadonly（浅只读）
Vue3-readonly(深只读) 与 shallowReadonly（浅只读） readonly(深只读)：具有响应式对象中所有的属性，其所有值都是只读且不可修改的。shallowReadonly(浅只读)：具有响应式对象的第一层属性值是只读且不可修改的&#x…...
中小企业怎么实现数字化转型？有什么实用的工单管理系统？
当前，世界经济数字化转型已是大势所趋。在这个数字化转型的大潮中，如果企业仍然逆水而行，不随大流，那么，企业将有可能会被抛弃，被对手超越，甚至被市场边缘化，导致最终的结果是&#…...
vue3.x中父组件添加自定义参数后，如何获取子组件$emit传递过来的参数
之前写过一篇文章，vue中父组件添加自定义参数后，如何获取子组件$emit传递过来的参数 现在已经进入vue3.x开发的时代了，那么vue3.x中父组件添加自定义参数后，如何获取子组件$emit传递过来的参数？ 1、子组件使用emit传…...
【Machine Learning in R - Next Generation • mlr3】
本篇主要介绍mlr3包的基本使用。 一个简单的机器学习流程在mlr3中可被分解为以下几个部分： 创建任务 比如回归、分裂、生存分析、降维、密度任务等等挑选学习器（算法/模型） 比如随机森林、决策树、SVM、KNN等等训练和预测 创建任务 本次示…...
CorelDraw2024（CDR）- 矢量图制作软件介绍
在当今数字化时代，平面设计已成为营销、品牌推广和创意表达中不可或缺的元素。平面设计必备三大软件Adebo PhotoShop、CorelDraw、Adobe illustrator, 今天小编就详细介绍其中之一的CorelDraw软件。为什么这款软件在设计界赢得了声誉，并成为了设计师的无…...
RT-DETR优化改进：轻量级Backbone改进 | VanillaNet极简神经网络模型 | 华为诺亚2023
🚀🚀🚀本文改进：一种极简的神经网络模型 VanillaNet，支持vanillanet_5, vanillanet_6, vanillanet_7, vanillanet_8, vanillanet_9, vanillanet_10, vanillanet_11等版本，相对于自带的rtdetr-l、rtdetr-x参数量如下： layersparametersgradientsvanillanet_5338277174…...
本地部署 EmotiVoice易魔声 多音色提示控制TTS
本地部署 EmotiVoice易魔声 多音色提示控制TTS EmotiVoice易魔声 介绍ChatGLM3 Github 地址部署 EmotiVoice准备模型文件准备预训练模型推理 EmotiVoice易魔声 介绍 EmotiVoice是一个强大的开源TTS引擎，支持中英文双语，包含2000多种不同的音色ÿ…...
5g路由器赋能园区无人配送车联网应用方案
随着人工智能、无人驾驶技术和自动化技术的不断进步，无人配送技术得到了极大的发展。园区内的物流配送任务通常是繁琐的，需要大量的人力资源和时间。无人配送技术能够提高配送效率并减少人力成本。无人配送车辆和机器人能够根据预定的路线和计划自动完成…...
ARTS 打卡第一周
ARTS AlgorithmReviewTipShare Algorithm 题目 class Solution {func mergeAlternately(_ word1: String, _ word2: String) -> String {var ans ""var idx1 word1.startIndexvar inx2 word2.startIndexwhile idx1 < word1.endIndex || idx2 < word2.e…...
第八部分：JSP
目录 JSP概述 8.1：什么是JSP，它有什么作用？ 8.2：JSP的本质是什么？ 8.3：JSP的三种语法 8.3.1：jsp头部的page指令 8.3.2：jsp中的常用脚本 ①声明脚本（极少使用…...
Github小彩蛋显示自己的README,git 个人首页的 README,readme基本语法
先上效果👇 代码在下面，流程我放最下面了，思路就是创建一个和自己同名的仓库，要公开，创建的时候会提示小彩蛋你的reademe会展示在你的首页，或许你在这个readme里面的修改都会在你的主页上看到了ὄ…...
dxva2+ffmpeg硬件解码（Windows）终结发布
《dxva2超低延迟视频播放器》演示demo下载URL： 【免费】dxva2硬解码超低延迟网络本地播放器资源-CSDN文库 本地播放 截图： rtsp播放截图（推送内容为本地桌面，所以是这样的） OK，进入主题： 前前…...
C#密封类、偏类
C#密封类 在C#中，密封类（Sealed Class）是一种特殊的类，它阻止其他类继承它。你可以通过在类定义前面加上 sealed 关键字来创建一个密封类。 以下是一个密封类的例子： public sealed class MyClass {// Class member…...
C++菱形继承问题
总结： 菱形继承带来的主要问题是子类继承两份相同的数据，导致资源浪费以及毫无意义利用虚继承 virtual 可以解决菱形继承问题 #include <iostream> #include <string> using namespace std; class Animal { public:int m_Age; };//继承前加…...
第20章 数据库编程
通过本章需要理解JDBC的核心设计思想以及4种数据库访问机制，理解数据库连接处理流程，并且可以使用JDBC进行Oracle数据库的连接，理解工厂设计模式在JDBC中的应用，清楚地理解DriverManager类的作用，掌握Connection、Prep…...
PS学习笔记——初识PS界面
文章目录 PS界面 PS界面 我使用的是PS2021，可能不同版本界面有所不同，但大体来说没有太多差异 可以看到下面这个图就是ps的主界面，大体分为菜单栏、选项栏、工具栏、面板、以及最中央的工作区。 ps中的操作基本都能在菜单栏中找到 可以从菜…...
JDBC，Java连接数据库
下载 JDBC https://mvnrepository.com/ 创建项目，然后创建一个目录并将下载好的 jar 包拷贝进去 选择 Add as Library，让这个目录能被项目识别 连接数据库服务器 在 JDBC 里面，使用 DataSource 类来描述数据库的位置 import com.mysql.cj.…...
java智慧校园信息管理系统源码带微信小程序
一、智慧校园的定义 智慧校园指的是以云计算和物联网为基础的智慧化的校园工作、学习和生活一体化环境。以各种应用服务系统为载体，将教学、科研、管理和校园生活进行充分融合，让校园实现无处不在的网络学习、融合创新的网络科研、透明高效的校务治理、…...
智能电销机器人好做吗？ai机器人有没有用？
电销机器人是基于深度神经学算法和卷积神经网络算法，将网络电话、语音识别、自然语言理解、多轮对话、知识图谱等多个门类集于一身的智能产品。不但能与客户智能交流，更能根据已经设定好的专业话术进行业务描述和问题解答，在电销行业是不可多…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
MinIO Docker 部署：仅开放一个端口
MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...
Caliper 配置文件解析：fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...