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

昨天收到 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来判断文件大小并给出提示。
javascript 复制代码
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; # 将最大值通过头信息传递
    ...
    }

  2. 前端读取响应头: 前端在页面加载时或首次上传时,可以通过发起一个请求,读取响应头中的X-Max-Upload-Size,然后将其转换为数值进行校验。

javascript 复制代码
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

javascript 复制代码
// 发送 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)
    })

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

javascript 复制代码
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 全局暴露:

javascript 复制代码
const getters = {
  maxUploadSize: state => state.user.maxUploadSize
}
export default getters

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

javascript 复制代码
/**
  * 文件上传
  */
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
    }
  }
  // ...业务代码
}
相关推荐
xnuscd9 小时前
前后端学习
学习·状态模式
冰零(lane)10 小时前
状态模式之状态机
java·设计模式·状态模式
酸奶代码13 小时前
【SpringMVC - 1】基本介绍+快速入门+图文解析SpringMVC执行流程
java·开发语言·spring·intellij-idea·状态模式
萨达大1 天前
23种设计模式-状态(State)设计模式
c++·设计模式·状态模式·软考·软件设计师·行为型设计模式
NetX行者2 天前
基于Vue3与ABP vNext 8.0框架实现耗时业务处理的进度条功能
前端·vue.js·进度条·状态模式
烟雨国度4 天前
流程图图解@RequestBody @RequestPart @RequestParam @ModelAttribute
流程图·状态模式
拉里小猪的迷弟4 天前
设计模式-行为型-常用-2:职责链模式、状态模式、迭代器模式
java·设计模式·迭代器模式·状态模式·责任链模式
xiangzhihong84 天前
前端性能优化之R树的使用
状态模式
Magicapprentice4 天前
fast-api后端 + fetch 前端流式文字响应
前端·后端·状态模式
getaxiosluo4 天前
node对接ChatGpt的流式输出的配置
人工智能·ai·chatgpt·状态模式·node·数据流