PostMan raw 可以请求数据,但是ajax拿不到数据问题排查

2022年11月16日 0 作者 小渔民

今天同事牙膏妹问了一个问题,一个接口postman可以拿到数据,但是ajax却是请求失败,不会写了。。

截图是postman能获取
截图是postman能获取数据,但是body必须 raw ,且格式选 json 和 text xml 都可以,但是选 javascript就会失败。

经查 postman 的raw 意思是说发起请求的参数是文本格式。
参考资料:
postman的几种参数格式
Postman中post的数据类型

如下图所述 ,注意请求头中的 content-type 是json 。
在这里插入图片描述
推到这里,既然参数格式可以是 json 和 text 的文本 ,那么 ajax 同样需要设置 Content-Type ,于是在ajax加了 header

headers: { 'Content-Type': 'text/xml;charset=utf-8' },
或
headers: { 'Content-Type': 'application/json;' },

那么问题来了,这个data 参数在ajax怎么写呢? 之前postman body 中参数是 {“userCode”:“123456”}

既然指定了请求的Content-Type参数格式是文本,那么这里的 ajax data 就应该也是文本格式,需要转换为json字符串。经测试接口成功返回数据。

data: JSON.stringify({ 'userCode': '01468686' })

这里是重点,之前没加JSON.stringify 虽然指定了上传参数格式为文本,但是实际传的参数却是json ,导致接口请求失败。

此时突然想起 ajax 还有个参数是 contentType: 'application/json',
contentType : 发送数据到服务器时所使用的内容类型。 默认是:“application/x-www-form-urlencoded”。
因为 “application/x-www-form-urlencoded” 是键值对格式,所以才会报错,应该指定一下 json 格式

到这里调试结束。完整ajax代码

$.ajax({
    type : "post",
    url : "https://asdasd.net/fssc/bill/define/api/getMyBill",
    //data: { "": JSON.stringify({ 'userCode': '123' }) },
    data : JSON.stringify({
        'userCode' : '132'
    }),
    //data: { 'userCode': '123' },
    //dataType: 'text',

    //失败
    //headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

    //以下3种都可以
    //headers: { 'Content-Type': 'text/xml;charset=utf-8' },
    //headers: { 'Content-Type': 'application/json;' },
    contentType : 'application/json',
    success : function (data) {
        //alert(data.message);
    }
});

总结:

  1. http 请求头中 Content-Type 是指定发送到服务器的参数格式。
    如果是ajax请求想更改, 可以两种方法:
    a. ajax 指定一下header 。 headers: { 'Content-Type': 'text/xml;charset=utf-8' }
    b. 用ajax自带属性 contentType: 'application/json
    但是需要注意contentType不指定的话会有默认application/x-www-form-urlencoded,所以contentType不写的话有可能接口有要求从而导致访问不通
  1. ajax 参数,
    contentType 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。
    dataType 预期的服务器响应的数据类型。
  1. ajax 自定义 header 两种方法
$.ajax({
    type : "get",
    url : "/xxx/xxx/xxx/getPersonHeader",
    async : true,
    //ajax配置请求头方式,第一种
    headers : {
        "Access-Token" : "Access-Token123456", //自定义请求头
        "Content-Type" : "application/json;charset=utf8"
    },
    //ajax配置请求头方式,第二种
    //beforeSend : function(request) {
       //   request.setRequestHeader("Access-Token", "Access-Token123456");
    //   request.setRequestHeader("Content-Type", "application/json;charset=utf8");
    //}
    data : {},
    success : function (data) {
        console.log(data);
    }
});

4.请求的ajax data参数类型要和指定的参数类型 ajax contentTypeheader 的 Content-Type一致。且要注意不指定ajax 时contentType 属性时的默认值

原文连接:点击进入