使用jQuery AJAX调用外部URL并打印响应时出现404错误如何解决

核心报错诱因 #

• URL参数重复冲突：原始请求地址中手动拼接了空的callback=参数，而jQuery的JSONP实现会自动在请求后拼接全局回调函数参数，最终生成包含两个重复callback参数的请求地址，服务端无法匹配对应接口路由，返回404。
• 请求方法配置无效：JSONP的底层实现逻辑是动态创建<script>标签加载跨域资源，这类请求本质仅支持GET方法，配置type: 'post'对JSONP场景完全不生效，部分服务端校验请求方法不匹配时会直接返回404。
• 跨域能力不匹配：若调整完上述参数后仍返回404，说明目标接口并未开启JSONP跨域支持，无法响应该格式的请求。

修正后可运行的代码示例 #

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $.ajax({
    // 移除原地址中手动拼接的空callback参数
    url: 'http://www.example.com/api/get/1',
    // JSONP仅支持GET请求，无需额外指定post方法
    type: 'get',
    dataType: 'jsonp',
    // 不配置时回调函数名由jQuery自动生成
    success: function(result) {
      console.log('请求成功', result);
    },
    error: function(err) {
      console.log('请求失败', err);
    }
  });
</script>

补充注意事项 #

如果目标接口仅支持CORS跨域、不支持JSONP格式请求，需将dataType修改为普通json类型，由服务端配置对应的跨域响应头完成跨域调用，不可强行使用JSONP模式发起请求。
若目标接口要求的回调参数名不是默认的callback，可通过ajax配置项中的jsonp字段指定匹配的参数名。

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