jsonp跨域请求的问题

今天发现json取数据的时候有时会报如下的错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 

我是有很多的子域名,网上说是跨域的的问题,貌似可以通过jsonp解决,于是测试了一下,遇到以下几个问题:

1.jsonp好像是通过iframe创建<script>标签来执行请求的,所以默认是通过get方式请求,即使ajax请求的type设为post也被自动转为post,要想以post请求设置也比较麻烦,具体参考:http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery

2.直接将函数放在document.ready闭包里,像下面的写法,不会走到receive函数里

<script type="text/javascript">
$(function() {
  //function viewWholePhone(url){
    $('#btn_show_num').click(function(){
    	$.ajax({
      type:"get",
        url:$(this).attr("data-check-url"),
        data:{sn:'{$sn}'},
        dataType: 'jsonp',  
        crossDomain: true,
        jsonp:"callback",
        jsonpCallback:"receive",
        success:function(ret){
        }
        });
    });
  //}
  function receive(ret) {  
    if(ret.status == 0 && ret.data!=null){
      $('#store_mobile').text(ret.data.store_mobile);
      $('#btn_show_num').hide();
    }else{
      if(ret.status == 300){
        location.href="{$site_url}/index.php?app=member&act=login&ret_url=";
      }else{
        alert(ret.msg);
        $('#btn_show_num').attr('readonly', 'true');
      }
    }
  } 
});
</script>

下面这个样子是可以的

<script type="text/javascript">
function viewWholePhone(url){
  $.ajax({
		  type:"POST",
      url:url,
      data:{sn:'{$sn}'},
      dataType: 'jsonp',  
      crossDomain: true,
      jsonp:"callback",
      jsonpCallback:"receive",
      success:function(ret){
      }
  });
}
function receive(ret) {  
  if(ret.status == 0 && ret.data!=null){
    $('#store_mobile').text(ret.data.store_mobile);
    $('#btn_show_num').hide();
  }else{
    if(ret.status == 300){
      location.href="{$site_url}/index.php?app=member&act=login&ret_url=";
    }else{
      alert(ret.msg);
      $('#btn_show_num').attr('readonly', 'true');
    }
  }
} 
</script>

  

  

原文地址:https://www.cnblogs.com/jenqz/p/4460313.html