借助node实战JSONP跨域实例-成都快上网建站

借助node实战JSONP跨域实例

一、前言:

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、虚拟主机、营销软件、网站建设、隆子网站维护、网站推广。

浏览器安全是基于同源策略的。所谓同源策略就是三相同:

1、协议相同;

2、域名相同;

3、端口相同。

但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP。

JSONP的基本思想:就是通过

好了,前后端都编码完毕,接下来,我们就看看效果吧。

首先启动node服务器,如下:

借助node实战JSONP跨域实例

注:我将我们搭建的服务器server.js放在D:/JSONP中

接下来,运行上面所写的html代码,可以发现请求成功,并执行test方法。

借助node实战JSONP跨域实例 

但,我们一进来,就得跨域请求,是否有点不妥,所以可以动态创建script元素,并指定相应请求,任由我们所为。

如下:

//动态创建script标签,并请求
function addScriptTag(src){
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.src = src;
  document.body.appendChild(script);
};
//如:在onload后,跨域请求
window.onload = function(){
  addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey');
};
//回调的方法,且必须为全局方法,不然会报错
function monkey(data){
  alert(data);
};

JSONP还需要注意的就是,回调函数的方法必须是全局的,不然会报错的,因为是通过script的src请求的嘛,请求成功后立即执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站栏目:借助node实战JSONP跨域实例
本文路径:http://kswjz.com/article/ieocpi.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流