403 Request Entity Too Lager(请求体太大啦)

news2024/11/8 12:38:05

昨天收到 QA 的生产报障,说是测试环境的附件上传功能报了 403 的错误,错误信息:403 Request Entity Too Lager。我尝试复现问题,发现传个几兆的文件都费劲啊,一传一个失败。不用说,项目用到 ng 代理,并且前端工程也没有做相应错误的提示,十有八九是 ng 配置文件的问题了。一看配置文件果然啥都没写,没记错的话,ng 缺省状态下只能请求体只能接受 1M 大小的数据量。

于是找到对应项目的代理配置,在 server 里面加上:

server {
	  listen       my_port;
	  server_name  localhost;

		client_max_body_size 5M;			# 上传文件大小限制
		add_header X-Max-Upload-Size 5M;	# 将最大值通过头信息传递
		add_header Access-Control-Expose-Headers x-max-upload-size;

		location /PartyBuilding_Api/login/
		{
			proxy_pass my_proxy;
		}
		# 禁用常用攻击网址,直接返回444
		location ~* ^/(cgi|actuator|shell|hudson|druid|php) {
			return 444;
		}
	}

1、寻找解决方案


完善 ng 配置之后,通常有以下几种做法:

方法一、通过后端接口读取配置


可以通过后端接口向前端提供 nginx 的client_max_body_size配置值,步骤如下:

  1. 在后端提供一个 API:让后端读取 nginx 的配置并提供一个接口返回配置值。
    1. 可以在后端读取 nginx 配置文件的内容,找到client_max_body_size的值,然后返回给前端。
    2. 或者后端直接硬编码该值为接口输出(如果不会频繁更改)。

例如,后端返回一个类似这样的 JSON 相应:

{
    "maxUploadSize": 3145728  // 3 MB in bytes
}
  1. 前端获取配置值:在前端应用启动时,向该 API 发起请求,得到maxUploadSize的值。
    1. 然后在上传文件前,可以用获取到的maxUploadSize来判断文件大小并给出提示。
let maxUploadSize = null;

// 获取最大上传大小
async function fetchMaxUploadSize() {
    const response = await fetch('/api/get-upload-config'); // 调整为实际的 API 路径
    const data = await response.json();
    maxUploadSize = data.maxUploadSize;
}

// 在上传前调用
function checkFileSize(file) {
    if (maxUploadSize && file.size > maxUploadSize) {
        alert(`文件大小不能超过 ${(maxUploadSize / (1024 * 1024)).toFixed(2)} MB`);
        return false;
    }
    return true;
}

// 应用初始化时调用
fetchMaxUploadSize();

方法二 、nginx 通过响应头传递配置


另一种方法是让Nginx在响应头中包含client_max_body_size,这样前端可以直接读取这个值。

  1. 在Nginx配置中添加响应头:修改Nginx配置文件,设置一个自定义的响应头,将client_max_body_size值传递给前端。
server {
    ...
    client_max_body_size 3M;  # 最大3MB
    add_header X-Max-Upload-Size 3M;  # 将最大值通过头信息传递
    ...
}
  1. 前端读取响应头:前端在页面加载时或首次上传时,可以通过发起一个请求,读取响应头中的X-Max-Upload-Size,然后将其转换为数值进行校验。
let maxUploadSize = null;

async function fetchMaxUploadSize() {
    const response = await fetch('/');  // 请求你的应用主页或某个API
    const maxUploadSizeHeader = response.headers.get('X-Max-Upload-Size');
    if (maxUploadSizeHeader) {
        maxUploadSize = parseSize(maxUploadSizeHeader);  // 将 '3M' 转换成字节
    }
}

function parseSize(size) {
    const units = { 'K': 1024, 'M': 1024 * 1024, 'G': 1024 * 1024 * 1024 };
    const unit = size.slice(-1);
    const number = parseFloat(size);
    return number * (units[unit.toUpperCase()] || 1);
}

function checkFileSize(file) {
    if (maxUploadSize && file.size > maxUploadSize) {
        alert(`文件大小不能超过 ${(maxUploadSize / (1024 * 1024)).toFixed(2)} MB`);
        return false;
    }
    return true;
}

fetchMaxUploadSize();

方法三、在构建时传递环境变量


如果前后端分离,且后端(或Nginx配置)中有client_max_body_size的配置,可以在构建时将这个值作为环境变量注入前端应用。但这种方法需要在构建时设置,并且如果Nginx配置更改,可能需要重新构建前端应用。

.env文件种添加配置:

VUE_APP_MAX_UPLOAD_SIZE=3145728  # 3MB in bytes

然后在前端代码中访问:

const maxUploadSize = process.env.VUE_APP_MAX_UPLOAD_SIZE;

最推荐的方案是方法 1 或者方法 2,这样可以动态读取配置,而不需要在前端硬编码大小限制。

2、确定解决方案


因为在后端直接读取 Nginx 的client_max_body_size配置值并不那么容易,因为这个配置值属于 Nginx,而不是后端程序的直接配置,不过,仍然可以采用一些变通的方式来实现类似的效果。

  1. 如果配置值并不会频繁变更,可以硬编码在配置文件中
  2. 通过环境变量传递配置,即环境变量存储 ng 的配置值,然后通过程序读取。

由于我的开发环境并不能很方便的操作到生产机器,且如果硬编码在配置文件中,每次更新 ng 配置值,都需要重启服务,这样成本太高,所以不采用此方式。

最终决定将 ng 的配置值暴露到响应头中,用户在登录系统可在响应头拿到该值,然后在前端代码全局存储。

以下代码是本系统封装好的请求的部分代码,在此获得配置值,并传递给 data

// 发送 POST 请求
  service(requestConfig).then(response => {
      // 获取ng自定义header的值
      response.data.maxUploadSize = response.headers['x-max-upload-size']
      resolve(response.data)
    }).catch(error => {
      // console.log('jungle:' + error)
      // alert('超时了:' + error + typeof error)
      reject(error)
    })

在获取用户信息的函数中设置该值

import ...

const user = {
  state: {
    maxUploadSize: '', // 用户可上传附件大小
  },

  mutations: {
    // 设置用户可上传附件大小
    SET_MAX_UPLOAD_SIZE: (state, size) => {
      state.maxUploadSize = size
    },
  },

  actions: {
    // 获取用户信息
    GetUserInfo({ commit }) {
      getUserInfo().then(res => {
        if (res.type === 'success') {
          // ...
          commit('SET_MAX_UPLOAD_SIZE', res.maxUploadSize) // 设置用户可上传附件大小
        } else {
          // ...
        }
      })
    },
  }
}

export default user

在 getter.js 全局暴露:

const getters = {
  maxUploadSize: state => state.user.maxUploadSize
}
export default getters

在 element-ui 组件 el-upload 上传的方法进行拦截判断

/**
  * 文件上传
  */
beforeUpload(uploadItem) {
  const maxUploadSize = this.$store.getters.maxUploadSize // ng配置可上传文件大小
  if (this.maxUploadSize !== undefined && this.maxUploadSize !== null && this.maxUploadSize !== '') {
    const maxUploadSize = this.unitToByte(this.maxUploadSize)
    if (uploadItem.file.size > maxUploadSize) {
      this.$message({ type: 'warning', message: '文件大小超过了' + maxUploadSize + '的限制' })
      return
    }
  }
  // ...业务代码
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235819.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【VScode】如何在VSCode中配置Python开发环境:从零开始的完整指南

文章目录 前言软件准备软件安装1. 安装Python2. 检查Python是否安装成功3. 安装第三方包4. 安装VSCode 配置VSCode1. 安装Python插件2. 创建项目,配置工作区域3. 编写Python文件4. 配置Python编译设置5. 使用代码格式化工具yapf 更多文章结尾 前言 在当今的编程世界…

SQL,力扣题目571, 给定数字的频率查询中位数

一、力扣链接 LeetCode_571 二、题目描述 Numbers 表: ------------------- | Column Name | Type | ------------------- | num | int | | frequency | int | ------------------- num 是这张表的主键(具有唯一值的列)。 这张表的每一行表示某个数…

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略 目录 zeroX的简介 1、支持的文件类型 zeroX的安装和使用方法 T1、Node.js 版本: 安装 使用方法 使用文件 URL: 使用本地路径&…

containerd配置私有仓库registry

机器ip端口regtisry192.168.0.725000k8s-*-------k8s集群 1、镜像上传 rootadmin:~# docker push 192.168.0.72:5000/nginx:1.26.1-alpine The push refers to repository [192.168.0.72:5000/nginx] 6961f0b8531c: Pushed 3112cd521249: Pushed d3f50ce9b5b5: Pushed 9efaf2eb…

js例轮播图定时器版

要求 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width, ini…

PostgreSQL 学习笔记:PostgreSQL 主从复制

PostgreSQL 笔记&#xff1a;PostgreSQL 主从复制 博客地址&#xff1a;TMDOG 的博客 在现代应用程序中&#xff0c;数据库的高可用性和扩展性是至关重要的。PostgreSQL 提供了主从复制功能&#xff0c;可以在多个数据库实例之间复制数据&#xff0c;以实现冗余和负载均衡。本…

【系统集成项目管理工程师教程】第5章 软件工程

软件工程是一门研究用工程化方法构建和维护有效、实用和高质量软件的学科&#xff0c;涵盖软件需求、设计、实现、测试、部署交付、质量管理和过程能力成熟度等方面&#xff0c;旨在提高软件生产率、质量并降低成本&#xff0c;确保软件项目的成功开发与维护。 5.1软件工程定义…

Java项目实战II基于Spring Boot的便利店信息管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在快节奏的…

vscode Comment Translate 反应慢 加载中...

Comment Translate 版本&#xff1a;v2.3.3 你是不是疑惑切换了 Bing 源也无法使用还是加载中… 那么可能你切换Bing后没重启vscode 下面是切换成功后的插件日志&#xff0c;一定要重启vscode&#xff0c;只是禁用和启用插件不行的&#xff0c;另外google是没用的&#xff0c;用…

网站架构知识之Ansible(day020)

1.Ansible架构 Inventory 主机清单:被管理主机的ip列表,分类 ad-hoc模式: 命令行批量管理(使用ans模块),临时任务 playbook 剧本模式: 类似于把操作写出脚本,可以重复运行这个脚本 2.修改配置 配置文件&#xff1a;/etc/ansible/ansible.cfg 修改配置文件关闭主机Host_key…

智启未来,趣享生活 德国卡赫举办系列新品首发活动

全球最大的清洁设备和清洁解决方案提供商德国卡赫&#xff0c;于11月6日在第七届进博会新品发布平台举办主题为“智启未来&#xff0c;趣享生活”的新品发布会&#xff0c;揭开全球首发新品可折叠式手持清洗机KHB Air以及亚洲首发新品商用清洁机器人KIRA CV 50的神秘面纱。作为…

xlsx.js 读取excel文件

需求&#xff1a;读取一个excel文件。 一、 使用antd的Upload组件的 【customRequest】方法。 互斥。此方法跟【onChange】方法互斥&#xff0c;即&#xff1a;不可同时出现。调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次&#xff08;读取中&#xff…

WPF中的依赖属性

1.创建项目后下载两个NuGet程序包 2.创建一个MyButton类继承Button MyButton类如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Contro…

Java执行顺序大揭秘:静态块、非静态块和构造方法谁先谁后?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello大家好,我是小米!今天咱们来聊聊Java中的一个小而重要的知识点——初始化块。可能有的小伙伴一听这名字就觉得有点头大,这东西到底是干嘛的?为…

【Linux系列】字符串操作的艺术:删除前缀的 Shell 脚本技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nginx 部署2个相同的vue

起因&#xff1a; 最近遇到一个问题&#xff0c;在前端用nginx 部署 vue&#xff0c; 发现如果前端有改动&#xff0c;如果不适用热更新&#xff0c;而是直接复制项目过去&#xff0c;会404 因此想到用nginx 负载两套相同vue项目&#xff0c;然后一个个复制vue项目就可以了。…

Maven(六)mvn 命令将 jar 包推送到 远程/本地仓库

目录 一、deploy - 推送到远程仓库1.1 命令语法&#xff1a;1.2 执行结果&#xff1a;1.3 可能遇到的问题问题1&#xff1a;with status code 401问题2&#xff1a;with status code 405问题3&#xff1a;Cannot deploy artifact from the local repository 二、install - 推送…

WEB 应用防护系统的部署方式

在当今数字化飞速发展的时代&#xff0c;WEB 应用面临着来自各方的安全威胁&#xff0c;而 WEB 应用防护系统&#xff08;WAF&#xff09;的部署成为了保障网络安全至关重要的环节。以下将详细介绍几种常见的 WEB 应用防护系统部署方式。根据 WAF 接入网络后的工作方式&#xf…

Java——静态成员

一、静态变量&#xff08;Static Variables&#xff09; 1、静态变量是什么 静态变量&#xff0c;又被称为类变量&#xff0c;它使用 static 关键字修饰。静态变量是类级别的变量&#xff0c;在类加载时初始化。 2、静态变量的特点 类级别共享&#xff1a;静态变量在所有实…

Java | Leetcode Java题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; class Solution {static int[][] dirs {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};public int[][] updateMatrix(int[][] matrix) {int m matrix.length, n matrix[0].length;// 初始化动态规划的数组&#xff0c;所有的距离值都设置为一个很大…