413 (Payload Too Large) 2023最新版解决方法

出现问题

博主在用vue脚手架开发的时候，在上传文件的接口中碰到

这样一个错误，查遍所有csdn，都没有找到解决方法，通过一些方式，终于解决了。

解决方法

1.打开Vue项目的根目录。

2.在根目录下创建一个名为 vue.config.js 的文件（如果已存在，请打开该文件）。

3.在 vue.config.js 中添加以下内容：

module.exports = {
  configureWebpack: {
    devServer: {
      clientLogLevel: 'warning',
      headers: { 'Access-Control-Allow-Origin': '*' },
      proxy: {
        '/api': {
          target: 'http://backend-server-url', // 后端服务器的地址
          changeOrigin: true,
          onProxyReq: (proxyReq, req, res) => {
            if (req.method === 'POST' && req.body) {
              const contentLength = Buffer.byteLength(req.body, 'utf-8');

              proxyReq.setHeader('Content-Length', contentLength);
            }
          },
        },
      },
    },
  },
};

4.将 http://backend-server-url 替换为你实际的后端服务器地址。

5.保存 vue.config.js 文件。

6.重新启动开发服务器。

或者在封装的axios里添加文件上传的响应头

  headers: {
       'Content-Type': 'multipart/form-data'
    },