借助node实战JSONP跨域实例

一、前言:

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

1、协议相同;

2、域名相同;

3、端口相同。

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

JSONP的基本思想:就是通过

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

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

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

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

借助node实战JSONP跨域实例_第2张图片 

但,我们一进来,就得跨域请求,是否有点不妥,所以可以动态创建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跨域实例)