使用jQuery JSONP请求时如何获取接口返回的自定义状态描述文本

JSONP本质是通过动态插入<script>标签加载跨域脚本实现跨域请求，并非标准的XMLHttpRequest请求：

• 浏览器不会将非200响应的状态文本、响应体内容暴露给JavaScript层面，<script>标签加载失败时只会触发通用的错误事件
• 你在控制台看到的404 Missing-Query是浏览器网络层的日志输出，默认无法在JS代码中直接读取
• jQuery封装的JSONP error回调仅能捕获超时、请求被拦截等通用异常，无法拿到服务端返回的自定义状态描述

方案1：后端适配（最推荐，兼容性最好） #

要求服务端调整JSONP接口的返回逻辑：无论请求成功/失败，统一返回200 HTTP状态码，将业务状态码、错误信息封装到JSONP的响应内容中，示例返回格式如下：

// 成功响应
callbackName({"code":200,"data":"接口返回的业务数据","msg":"success"})
// 失败响应
callbackName({"code":404,"data":null,"msg":"Missing-Query"})

对应调整前端AJAX的success回调逻辑即可读取错误信息：

$.ajax({
  url: patBaseUrl,
  type: "GET",
  crossDomain: true,
  data: { apikey:  patBaseToken, query: query},
  dataType : 'jsonp',
  contentType: "application/javascript",
  xhrFields: {
    withCredentials: true
  },
  success: function(response) {
    if (response.code === 200) {
      addAlert('success', '<b>Success!</b> Query was sent successfully!');
    } else {
      // 直接读取封装的错误信息
      addAlert('warning', `<b>Warning!</b> Something went wrong: ${response.code} ${response.msg}`);
    }
  },
  error: function(xhr) {
    addAlert('warning', '<b>Warning!</b> Something went wrong: ' + xhr.status + ' ' + xhr.statusText);
    console.log(xhr.status, xhr.statusText);
  }
})

方案2：弃用JSONP改用CORS #

如果服务端支持配置CORS跨域响应头，直接将dataType改回json，使用标准AJAX请求即可：

• 服务端配置Access-Control-Allow-Origin、Access-Control-Allow-Credentials等必要的CORS头
• 此时error回调可以正常读取xhr.status、xhr.statusText，就能拿到你需要的Missing-Query文本

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