借助node实战JSONP跨域实例

一、前言：

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

1、协议相同；

2、域名相同；

3、端口相同。

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

JSONP的基本思想：就是通过

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

首先启动node服务器，如下：

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

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

 

但，我们一进来，就得跨域请求，是否有点不妥，所以可以动态创建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请求的嘛，请求成功后立即执行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。