表单文本框里写太多字就出 404 了？原因和解决办法都在这儿！

1. 表单的enctype 属性

enctype 属性用于指定表单数据在提交时的编码方式，决定了浏览器如何封装和发送数据。

application/x-www-form-urlencoded：

未指定 enctype 时，浏览器会使用此值。编码方式：表单数据会被编码为名称/值对，特殊字符会被转换为 ASCII 十六进制值。例如，空格会被转换为 + 号。适用场景：适用于常规的表单提交，其中不包含文件上传。

multipart/form-data：

编码方式：表单数据以二进制形式编码，允许发送文本和二进制文件。

数据分割：multipart/form-data 会将表单数据分割成多个部分（part），每个部分有自己的边界（boundary）。

边界生成：浏览器会自动生成边界字符串，这些边界字符串可能会占用额外的字节数。

浏览器默认行为：当 enctype 设置为 multipart/form-data 时，浏览器会自动处理表单数据的分割和边界生成。

数据格式：multipart/form-data 的数据格式较为复杂，可能会导致后端解析失败或路径匹配错误。

适用场景：用于文件上传。当表单中包含 <input type="file"> 时，必须将 enctype 设置为 multipart/form-data。

text/plain：

编码方式：表单数据以纯文本形式发送，不进行特殊字符的编码。空格会被转换为 + 号，但特殊字符不会被编码。

适用场景：通常用于发送纯文本信息，如电子邮件等。这种格式不常用，因为它不提供数据的转义或保护。

注意：

• GET 方法：如果表单使用 GET 方法发送数据，enctype 属性无效。数据将以 URL 的查询字符串形式发送。

• 服务器端处理：在使用 multipart/form-data 时，后端需要处理，去解析这种类型的数据。通常是通过解析上传的文件流来实现。

2. 404 错误的原因分析

404 错误通常是请求的路径未找到，而不是直接由字符限制或编码问题导致的。可能与表单数据量或编码方式有关。以下是一些可能的路径相关问题：

(1) 路径片段截断

当使用 multipart/form-data 提交大量数据时，某些中间件或服务器可能对请求体的大小有限制，导致路径信息或请求参数被截断，使得后端无法正确匹配路径。

(2) 后端路径解析逻辑

如果后端对 multipart/form-data 请求的路径解析逻辑与普通表单不同，可能会导致路径匹配失败。

3.字符数量导致问题的原因

(1)字数较少时正常的原因

• 数据量较小：当输入的字数较少时，生成的 boundary 和分割部分较少，数据格式相对简单，后端能够正确解析。

• 路径未被截断：较少的数据量不会导致路径或参数被截断，因此请求能够正常到达后端。

(2)字数较多时出现问题的原因

• 数据量过大：当输入的字数较多时，生成的 boundary 和分割部分增多，数据格式变得复杂，可能导致后端解析失败。

• 路径或参数被截断：大量的数据可能导致路径或参数被截断，导致请求无法正确匹配后端路径，从而返回 404 错误。

• 后端限制：后端可能对 multipart/form-data 的请求体大小有限制，超过限制时会导致解析失败或路径匹配错误。

4. POST 请求与 multipart/form-data 的兼容性问题

当使用 POST 请求且 enctype="multipart/form-data" 时，以下因素可能导致问题：

• boundary 生成问题：浏览器自动生成的 boundary 可能与后端的解析逻辑不匹配。

• 字段格式问题：某些字段可能未被正确包含在 multipart/form-data 的请求体中。

5. 表单提交方法的影响

$("#applyaddfm").submit(); 使用了表单的默认提交行为，而 httpPost 函数手动构建了一个新的表单并提交。这两者之间的差异可能导致问题。

(1) 表单自动提交（$("#applyaddfm").submit();）

• 如果表单的 enctype 是 multipart/form-data，浏览器会以特定的格式发送请求体，但由于某些原因（如 boundary 未正确生成或字段格式不规范），可能导致后端无法正确解析路径或参数，进而返回 404。

(2) 手动提交（httpPost 函数）

• 手动创建的表单可能未设置 enctype="multipart/form-data"，浏览器会以默认的 application/x-www-form-urlencoded 格式提交数据，后端能更稳定地解析。

6. 解决方案

(1) 移除 enctype="multipart/form-data"（适用于无文件上传）

如果表单无需文件上传功能，移除 enctype，让浏览器使用默认的 application/x-www-form-urlencoded 编码方式：

<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">  <!-- 表单内容 --></form>

(2) 使用 fetch 或 XMLHttpRequest 提交数据

使用现代 AJAX 方法（如 fetch）提交数据，灵活控制请求格式：

fetch('${ctx}/lossAndDuty/car_query.do', {  method: 'POST',  headers: {    'Content-Type': 'application/x-www-form-urlencoded'  },  body: new URLSearchParams($("#applyaddfm").serialize())}).then(response => response.json()).then(data => console.log(data));

(3) 调整后端解析逻辑

• 增加请求体大小限制：确保后端能处理较大的 multipart/form-data 请求。

• 优化路径匹配逻辑：确保路径匹配不受数据量影响。

7.后端（JVAV）设置处理 multipart/form-data 请求的方法：

使用 Servlet 3.0：在 web.xml 中配置 MultipartConfig：

<web-app>  <servlet-mapping>    <servlet-name>default</servlet-name>    <url-pattern>/</url-pattern>  </servlet-mapping>
  <multipart-config>    <max-file-size>10485760</max-file-size> <!-- 文件最大尺寸，单位字节 -->    <max-request-size>10485760</max-request-size>    <file-size-threshold>0</file-size-threshold>  </multipart-config></web-app>

示例代码：

import javax.servlet.*;import javax.servlet.http.*;import java.io.*;
public class FileUploadServlet extends HttpServlet {    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // 检查是否是多部分请求        if (ServletFileUpload.isMultipartContent(request)) {            // 配置文件上传            DiskFileItemFactory factory = new DiskFileItemFactory();            ServletFileUpload upload = new ServletFileUpload(factory);
            // 解析请求            List<FileItem> items = upload.parseRequest(request);
            for (FileItem item : items) {                if (item.isFormField()) {                    // 处理普通表单字段                    String fieldName = item.getFieldName();                    String fieldValue = item.getString();                    System.out.println(fieldName + ": " + fieldValue);                } else {                    // 处理文件字段                    String fileName = item.getName();                    item.write(new File("uploads/" + fileName));                    System.out.println("File uploaded: " + fileName);                }            }        }    }}

关键点：

• ServletFileUpload：用于解析 multipart/form-data 请求。

• item.write()：将文件保存到指定路径。

8. 总结

表单文本框内容过多导致 404 错误，通常是由于 multipart/form-data 的复杂性引发的路径截断或后端解析失败。通过移除 enctype、使用现代 AJAX 方法或调整后端逻辑，可以有效解决该问题。

文章转载自：DarkLONGLOVE

原文链接：https://www.cnblogs.com/darklong/p/18719824

体验地址：http://www.jnpfsoft.com/?from=001YH