模拟jsonp跨域方法

jsonp 跨域方法详解

什么事跨域

浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。- 协议名protocol- 主机host- 端口号port- 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。

XMLHttpRequest 有跨域请求限制

• 不同域名，主机名会有跨域限制

  • 127.0.0.1
  • 192.168.135.25

• 同域名不同端口号也会有跨域限制

  • 127.0.0.1:3000
  • 127.0.0.1:5000

• 不同协议也有跨域限制

  • file:///C:/Users/iroc/Desktop/
  • http://www.baidu.com
  • https://www.baidu.com

解决办法

模拟一个 jsonp 方法

    在JavaScript中script标签是不受跨域限制的，所有我们使用自动创建一个 <script> 标签来进行跨域请求数据。

js代码如下

//url 请求的路径//params 请求的参数// fn 响应后返回的回调函数function jsonp(url,params,fn){// 定义一个strParam 变量 用于循环接收到传递的参数var strParam ="";for(var p in params){    strParam += p + "=" + params[p] +"&";}//定义一个随机变量 避免全局代码污染var randomFn = "fn_"+ Math.random.toString().toSubString(2);//定义一个变量 挂载回调函数window[randomFn]= function(data){   //方法**  后台返回之后这里调用  匿名函数自调 得到后台响应的值    fn(data);}var realUrl = url+"?"+strParam + "callback "+"="+randomFn;function jsonp(url,params,fn)var newScript= document.createElement("script");newScript.src=realUrl;document.body.appendChild("newScript");}// 调用jsonp 函数jsonp(url,params,function(data){    console.log(data);})

nodejs 模拟后台处理请求

var http = require("http");var server = http.createServer();var url = require("url");server.on("request",function(req,resp){    var ObjUrl = url.parse(req.url,true);    var relUrl = ObjUrl.query;    resp.end(relUrl.callback+"("+'{"userName":"yourName"}'+")")// ！！！！注意 这里的callback是你前台js的参数callback  ，可以自定义，但是必须和前面一一对应// 后面拼接一个 含对象参数的方法返回去// !!!!注意  这里也是我们的核心思想  我们这里返回通过url参数请求的callback 获取对应的返回函数 // 采用的是前台定义 后台执行的方法，当后台返回是默认会在前端调用 window里面挂载的函数,通过自调的方式//得到响应的请求值 。这里我是默认返回一个{“userName”：“yourName”} 如果relUrl.callback=demo// 那么可以看为 demo({“userName”：“yourName”}) ,当数据返回到前台是就会调用前台定义的 “方法**“”// 返回什么数据有自己定义  这样你就可以在调用jsonp方法的时候在function（data）{console.log(data)} 获//取data 进行使用//})