设置contentType为application/json时AJAX POST请求报bad request错误如何解决

问题原因 #

当你显式指定contentType: "application/json"时，相当于告知后端本次请求的body是JSON格式，但jQuery原生默认会将data参数的普通对象序列化为application/x-www-form-urlencoded格式的表单字符串，前后端格式不匹配导致后端解析失败，就会返回400 bad request错误。

修复方案 #

• 方案1：如果后端确实需要接收JSON格式的参数，将请求参数手动序列化为JSON字符串即可
  修改后的代码如下：

$.ajax({
  type: 'POST',
  url: posturl,
  contentType: "application/json",
  data: JSON.stringify({
    authenticity_token: $('[name="csrf-token"]')[0].content,
    msg_time: msg_time,
    sender: sender,
    sender_name: sender_name,
    body: msgbody,
  }),
  success: function (res) {
    console.log(res);
  },
  error: function (err) {
    console.log(err);
  },
});

• 方案2：如果后端本身只接收表单格式的请求，直接删除contentType: "application/json"配置即可，使用jQuery默认的表单格式提交。

补充说明 #

代码中的authenticity_token是Rails框架的csrf校验参数，转成JSON格式提交时，只要后端配置了JSON参数解析，该参数依然可以正常被识别，不需要额外调整。

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