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机器人有没有用？
电销机器人是基于深度神经学算法和卷积神经网络算法，将网络电话、语音识别、自然语言理解、多轮对话、知识图谱等多个门类集于一身的智能产品。不但能与客户智能交流，更能根据已经设定好的专业话术进行业务描述和问题解答，在电销行业是不可多…...
嵌入式开发者的效率利器：在VS Code里实时看到MISRA-C违规提示（含头文件路径配置避坑）
嵌入式开发实战：用VS Code打造MISRA-C实时检查工作流 每次保存代码后才发现MISRA-C违规有多痛苦？想象一下这样的场景：你正在编写一段关键的车载控制逻辑，反复调试后终于通过了编译，却在提交前的静态检查中被揪出二十多…...
BilibiliDown：如何高效批量下载B站视频并实现离线收藏管理？
BilibiliDown：如何高效批量下载B站视频并实现离线收藏管理？ 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.…...
UE5材质编辑器进阶：手把手教你创建并调用自定义ush函数库（附避坑指南）
UE5材质编辑器进阶：打造高效可复用的自定义ush函数库 在虚幻引擎5的材质创作中，重复编写相同的HLSL代码不仅效率低下，还容易引入错误。本文将带你深入理解如何创建并调用自定义ush函数库，提升材质开发的专业性和可维护性。 1. 为什…...
Mermaid Live Editor：5分钟掌握专业图表制作的在线实时编辑器
Mermaid Live Editor：5分钟掌握专业图表制作的在线实时编辑器 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live…...
2026最权威的降重复率工具解析与推荐
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 知网AI检测系统会去对文本的语义连贯性展开多维分析，会对文本的句式结构进行多维…...
AI风口来袭！转型LLM应用开发工程师，非常详细收藏我这一篇就够了
一、引言：AI时代下的新职业机遇 近年来，随着人工智能技术的快速发展，尤其是大语言模型（Large Language Models, LLM）的突破，软件行业正在经历深刻变革。以GPT系列模型为代表的技术，使自然语言理…...
AI辅助开发：利用快马构建openclaw强化学习抓取训练环境
最近在研究机械爪的抓取策略优化，发现手动调参效率太低，于是尝试用AI辅助开发来构建一个强化学习训练环境。这个项目主要围绕openclaw机械爪的启动和控制策略展开，通过快马平台的AI能力快速搭建实验环境，效果出乎意料地好。 环境搭…...
Llama-3.2V-11B-cot入门必看：Streamlit会话状态管理保障多用户隔离
Llama-3.2V-11B-cot入门必看：Streamlit会话状态管理保障多用户隔离 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具，专为双卡4090环境深度优化。该工具通过Streamlit框架构建了宽屏友好的交互界面…...
GLM-4.1V-9B-Base快速体验教程：PyCharm专业版中的调试与开发技巧
GLM-4.1V-9B-Base快速体验教程：PyCharm专业版中的调试与开发技巧 1. 开篇：为什么选择PyCharm开发GLM应用 PyCharm作为Python开发者最熟悉的IDE之一，其专业版提供的远程开发调试能力特别适合GLM这类大模型开发场景。想象一下，你可…...
你的pip更新报错，可能和Python 3.4这个“老古董”有关 | 版本兼容性排查指南
当pip更新报错时：Python版本兼容性深度排查指南 在Linux服务器上执行pip install --upgrade pip时，屏幕上突然跳出一串红色错误日志——这可能是每位Python开发者都经历过的噩梦。更令人抓狂的是，明明按照官方文档操作，却依然卡在…...