AJAX POST请求数据为何通过URL传输？如何解决414 URI过长错误？

嘿，我来帮你理清楚这个问题哈！你遇到的情况主要有两种可能的原因：

1. jQuery的默认编码逻辑“搞的鬼”
   你用$.ajax发POST请求时，如果data传的是普通JS对象，jQuery默认会把它编码成application/x-www-form-urlencoded格式（就是GET请求那种键值对），然后放到请求体里。不过如果你的代码或者全局的$.ajaxSetup不小心改了请求方法（比如设成了GET），那参数就会被拼到URL上，同时请求体还保留着，就出现了重复。不过看你的代码明确写了type: "POST"，那更可能是第二种情况。

2. 服务器端重定向导致请求方法“变卦”
   如果你的服务器对/s这个POST请求返回了3xx重定向（比如302跳转），浏览器会自动把POST转成GET，还会把原来请求体里的参数拼到重定向后的URL上。这就导致你在Chrome里看到参数同时出现在URL、查询参数和请求负载里，最终因为URL太长触发414错误。

针对你的代码，给你几个靠谱的解决办法：

1. 直接用JSON格式传参（最推荐） #

修改$.ajax配置，明确指定contentType为application/json，并且直接把JSON字符串作为data传入，别包在对象里。这样参数只会在请求体里，绝对不会跑到URL上，还能避免urlencoded格式的长度限制：

const routes = JSON.stringify({/* 你的routes对象 */});
$.ajax({
  type: "POST",
  url: "http://127.0.0.1:3000/s",
  data: routes, // 直接传JSON字符串，不是{param1: routes}
  contentType: "application/json", // 告诉服务器这是JSON数据
  success: function(data) {
    $('div.home-products').html(data);
  }
});

2. 检查服务器端的重定向逻辑 #

如果服务器对/s的POST请求做了重定向（比如跳转到/s/或者其他路径），赶紧改改服务器代码，直接处理POST请求就行，别搞重定向。毕竟浏览器处理POST重定向时的“自动转GET+拼参数”操作，就是你这个问题的罪魁祸首之一。

3. 确保jQuery的请求方法没被篡改（可选） #

如果你还是想用application/x-www-form-urlencoded格式，那要确保请求方法严格是POST，没有全局设置干扰：

// 先检查全局配置（可选）
$.ajaxSetup({
  type: "POST",
  cache: false // POST请求默认cache是false，防止被转为GET
});

const routes = JSON.stringify({/* 你的routes对象 */});
$.ajax({
  url: "http://127.0.0.1:3000/s",
  data: { param1: routes },
  success: function(data) {
    $('div.home-products').html(data);
  }
});

不过还是首推第一种方法，尤其是当你的routes对象很大时，JSON格式传输更高效，也不会触发URL长度限制的问题。

内容的提问来源于stack exchange，提问作者MWO