jsonp解决跨域问题

Posted 2020-10-19 ymwangel

日常开发网页中，时常遇到跨域问题，通常解决办法：后端提供的接口支持jsonp格式，前端采用dataType：jsonp。

一：Jquery封装的AJAX，dataType：jsonp格式的方法：

 1 $.ajax({
 2     type : "get",
 3     async:false,
 4     url : "",
 5     dataType : "jsonp",
 6     jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
 7     jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名,但是不能为空
 8     success : function(data){
10        console.log(data)     27     },
28     error:function(){
29        alert(‘fail‘);
30     }
31 })

 

二：使用原生js封装jsonp接口，同时应用Promise对象，可以链式调用

window.STATE_CALLBACK = {
  uid:new Date - 0
}
function jsonp(url,param,callbackName){
  return new Promise(function(resolve,reject){
    callbackName = callbackName || ‘jsonpCallback‘
    var script = document.createElement(‘script‘)
    script.setAttribute(‘async‘,‘async‘)
    var name = [‘ymwangel‘,STATE_CALLBACK.uid++].join(‘‘)
    param[callbackName] = [‘STATE_CALLBACK.‘,name].join(‘‘)
    script.src = paramConcatUrl(url,param)
    document.body.appendChild(script)
    STATE_CALLBACK[name] = function(data){
      delete STATE_CALLBACK[name]
      document.body.removeChild(script)
      resolve(data)
    }
    script.onerror = function(e){
      reject(e)
    }
  })
}

原生js封装jsonp的函数，更能体现jsonp实现跨域的原理：在页面中创建script标签，设置script的async、src属性，然后，将script标签插入到body中，最后当响应请求成功，获取到返回的数据后，删除之前插入的script标签即可。