jQuery跨域AJAX指定POST却触发GET请求、414 URI过长问题求助

问题核心原因 #

• JSONP 本质是通过动态创建<script>标签发起资源请求实现跨域，<script>标签的src属性仅支持GET请求，因此不管你在配置中写type: "POST"，jQuery都会自动将请求转为GET，所有参数拼接在URL后，这就是你遇到POST变GET、URL超长报错的根本原因。
• 你配置的processData: false在JSONP场景下不生效，JSONP的参数必须全部拼接在URL中传递，无法通过请求体传参。
• 额外补充现有代码的错误：success回调的入参是data，你代码里的response变量未定义，会额外抛出引用错误。

解决方案 #

方案1：改用CORS实现跨域（最优方案，支持POST大体积表单） #

这是解决跨域POST请求的标准方案，改造成本低：

1. 前端调整AJAX配置，移除JSONP相关参数：

$.ajax({
  type: "POST",
  url: url,
  data: $form.serialize(),
  dataType: "json",
  success: function(data) {   
    console.log("Passed it");
    console.log(data); // 这里直接用回调返回的data即可
  }
})

2. 服务端配置CORS响应头即可，需要配置的核心头字段如下：
   • Access-Control-Allow-Origin：配置为允许发起请求的域名，测试阶段可临时设为*
   • 若有自定义请求头或特殊请求方法，额外配置Access-Control-Allow-Headers、Access-Control-Allow-Methods即可

方案2：后端代理转发（适用于无法修改目标服务端CORS配置的场景） #

如果目标接口你没有权限修改CORS配置，可以在你自己的业务后端加一层代理：

• 前端直接向同域名的后端接口发起POST请求，表单参数正常放在请求体传递
• 后端收到请求后，再向目标跨域接口转发请求，拿到响应后返回给前端
• 后端请求不存在跨域限制，完全避免JSONP的URL长度限制问题

方案3：JSONP参数压缩（临时兼容方案，不推荐长期使用） #

如果只能用JSONP实现，可以通过以下方式压缩URL长度缓解问题：

• 把40多个表单字段序列化为一个JSON字符串，做一次encodeURIComponent编码后作为单个参数传递，服务端拿到后再解析
• 尽可能精简字段，去掉非必要传递的参数
• 注意该方案仍受浏览器URL长度限制（多数浏览器最长支持8KB以内的URL，IE仅支持2KB左右），字段继续增加仍会触发414错误

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