您好,欢迎来到学生课堂 !
北京

咨询热线:400-9219-460
您当前的位置是:首页 >学校动态

2018WEB前端跨域问题解决方法

发布:北京火星人教育学院 时间:2018-10-22 11:48 点击:0

跨域?他是浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指:域名、协议、端口均相同。2018WEB前端跨域问题解决方法,北京web前端培训班分享给大家。

  解决

  方式一:script标签实现跨域(jsonp)

  原理:利用标签具有可跨域的特性,可实现跨域访问接口,需要后端的支持。

  var messagetow = function(data){

  alert(data); //后端返回的json格式的数据

  };

  var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";

  var script = document.createElement('script');

  script.setAttribute('src', url);

  document.getElementsByTagName('head')[0].appendChild(script);

  服务器在收到请求后,解析参数,计算返还数据,输出messagetow(data)字符串。

  缺点:只能发送get请求,无法访问服务器的响应文本(单向请求),即只能获取数据不能改数据。

  方式二:ajax的jsonp跨域(jsonp)

  通过ajax请求不同域的实现,底层不是靠XmlHttpRequest而是script,所以不要被这个方法给迷惑了。

  在ajax请求中类型如果是type是get post,其实内部都只会用get,因为其跨域的原理就是用的动态加载script的src,所以我们只能把参数通过url的方式传递

  $.ajax({

  url:'

  http://192.168.31.137/train/test/jsonpthree', //不同的域

  type: 'GET', //jsonp模式只有GET是合法的

  dataType: 'jsonp', //数据类型

  jsonp: 'callback', //指定回调函数名,与服务器端接收的一致,并回传回来

  jsonpCallback:'

  messagetow

  ',

  success:function(data){

  alert(data.price);

  },

  error:funciton(){

  }

  })

  其实jquery内部会转化成

  然后动态加载http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

  http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

北京web前端培训班http://hxrsj.xsketang.com/