nginx代理本地服务请求，避免跨域；前端图片压缩并上传

最新推荐文章于 2024-04-09 10:30:56 发布

置顶来自湖南的阿晨

最新推荐文章于 2024-04-09 10:30:56 发布

阅读量403

点赞数 7

分类专栏： Javascript与ES6~ 前端开发工具记录 html5 && css3 && 浏览器文章标签： nginx 运维前端 javascript

本文链接：https://blog.csdn.net/weixin_52479803/article/details/134280960

版权

Javascript与ES6~ 同时被 3 个专栏收录

43 篇文章 2 订阅

订阅专栏

html5 && css3 && 浏览器

29 篇文章 1 订阅

订阅专栏

前端开发工具记录

6 篇文章 0 订阅

订阅专栏

痛点

有时用vscode进行一些测试请求不同端口服务、或者其他服务接口时时，老是会报跨域，非常的烦

所有就想用 nginx 进行请求代理，来解决这个痛点

nginx

下载地址：nginx: download

下载到某一目录：

window下nginx相关命令

//检查 Nginx 配置文件语法是否正确
nginx -t

//启动 Nginx 服务
start nginx

//停止 Nginx 服务
nginx -s stop

//快速关闭并启动 Nginx 服务，用于重新加载配置文件
nginx -s reopen

nginx相关配置

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/jpeg
                        return 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/jpeg
                        return new Blob([ab], { type: 'image/jpeg' });
                    }

                    // 输出压缩后的图片数据
                    var compressedData = canvas.toDataURL('image/jpg', 1); // 压缩质量为0.7
                    var 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>