jQuery JSONP POST 跨域请求解决方案与局限

JSONP POST 跨域问题背景

近期在项目开发中遇到了一个关于 JSONP 跨域的问题：GET 传值可以正常运作，但 POST 传值始终无法成功。经过查阅大量网络资料，最终解决了该问题，现整理分享如下。

说明： 服务端 URL 为 http://www.t1.com/index.php 此为本地配置地址，实际使用时需替换为对应的真实地址。

客户端代码：

<script>
  $(function(){
     
    var url = 'http://www.t1.com/index.php';
    $.ajax({
      type:      'post',
      url:      url,
      data:      {name:'wangyulu'},
      dataType:    'jsonp',
      success:function(result){
        console.log(result);
      }
    });
     
  });
 </script>

服务端代码：

 
<?php
if($_POST){
  $arr = array('name'=>$_POST['name'], 'age'=>23);
  echo json_encode($arr);
}

浏览器运行截图如下：

观察运行结果发现，即使指定传送方式为 POST，jQuery 仍会自动将其转换为 GET 请求。这引发了疑问：JSONP 是否真的不支持 POST 提交方式？为此继续深入排查。

参考 StackOverflow 解决方案

经过一番折腾，最终在 StackOverflow 上找到了相关参考资料，看来国外开发者也面临类似问题。参考链接如下： http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery

关键点如图所示：

从上图可见，箭头标记处有所变化。暂不深究原理，先将相关配置应用到程序中尝试，或许能解决问题。

客户端与服务端配置修改

客户端修改如下： 添加配置：crossDomain: true 修改配置：dataType: "json"

服务端需添加以下响应头： header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Max-Age: 1000');

运行结果截图如下：

结果分析与性能局限

至此问题似乎得到解决，但仔细观察发现请求耗时显著增加。看来国外提供的方案在效率上并非最优。

最后总结，若要完美支持 POST 方式的 JSONP 确实存在较大难度。鉴于已投入不少时间，此处暂作结束。

以上内容可能涉及其他相关技术点，有兴趣者可自行深入研究。本文主要聚焦于解决 JSONP 相关问题，如有不足之处，敬请谅解。

以上即为本文全部内容，希望能对大家有所帮助。