使用节点对抗JSONP跨域示例

一、前言：

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

1.协议是一样的；

2.域名相同；

3.相同的端口。

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

JSONP的基本思想是通过脚本的src向服务器请求数据，这不受同源策略的限制(img和iframe的src也是如此)；然后服务器将相应的数据放入指定的函数回调名中，并将其返回给前端。

从而实现跨域信息请求。

如下图所示：

了解了JSONP的总体思路之后，让我们借助节点搭建一个简单的服务器，一步步实现JSONP带来的跨域请求之旅。

第二，构建节点服务器：

因为前端需要与后台协同实现跨域请求。在这种情况下，我们使用node来模拟后台服务器。

所以，你必须对节点和开发环境有一定的了解。

接下来，让我们编写一个简单的节点服务器。

首先，我们需要介绍http模块，因为它是基于http请求的。然后用它来创建一个http服务器，比如监听端口8080。

如下所示：

使用“严格”；//通过require var http=require('http ')将http库包含到程序中；//新建一个HTTP服务器var server=HTTP . createserver()；//响应请求请求server.on ('request '，function (req，RES) {res. writehead (200，{ ' content-type ' : ' text/html；charset=utf-8 ' })；res.end('地狱世界\ n ')；});//侦听8080端口服务器.侦听(' 8080 ')；//用于提示服务器已成功启动控制台。日志('服务器正在运行！');然后，因为我们需要区分使用JSONP的请求和正常请求，所以我们必须在后台进行判断——通过解析url字符串，假设我们通过带有“/jsonp”的路径名进行判断。

如下所示：

使用“严格”；//通过require var http=require('http ')将http库包含到程序中；//引入url模块解析url字符串var URL=require(' URL ')；//新建一个HTTP服务器var server=HTTP . createserver()；//响应请求请求server.on ('request '，function (req，RES) {var URL path=URL。解析(请求。网址)。路径名；//如果urlPath为' jsonp '，则在(URL path=='/jsonp '){ RES . write head(200，{ ' content-type ' : ' application/JSON；charset=utf-8 ' })；var数据={ ' name ' : ' Monkey ' }；data=JSON.stringify(数据)；//假设我们定义的回调函数叫做test var callback=' test ' '(' data ')；'；res.end(回调)；} else{ res.writeHead(200，{ ' Content-Type ' : ' text/html；charset=utf-8 ' })；res.end('地狱世界\ n ')；} });//侦听8080端口服务器.侦听(' 8080 ')；//用于提示服务器已成功启动控制台。日志('服务器正在运行！');在上述代码的第19行，有一个缺点，我们指定回调函数的名称dead。当我们判断请求是JSONP时，只能通过测试到前端，这显然是不合理的。

因此，我们必须借助querystring模块来处理querystring。

如下所示：

使用“严格”；//通过require var http=require('http ')将http库包含到程序中；//引入url模块解析url字符串var URL=require(' URL ')；//引入querystring模块处理查询字符串var query string=require(' query string ')；//新建一个HTTP服务器var server=HTTP . createserver()；//响应请求请求server.on ('request '，function (req，RES) {var URL path=URL。解析(请求。网址)。路径名；var QS=query string . parse(req . URL . split(？))[1]);if(urlPath==='/jsonp ' QS . callback){ RES . write head(200，{ ' Content-Type ' : ' application/JSON；charset=utf-8 ' })；var数据={ ' name ' : ' Monkey ' }；data=JSON.stringify(数据)；var回调=QS . callback '(' data ')；'；res.end(回调)；} else{ res.writeHead(200，{ ' Content-Type ' : ' text/html；charset=utf-8 ' })；res.end('地狱世界\ n ')；} });//侦听8080端口服务器.侦听(' 8080 ')；//用于提示服务器已成功启动控制台。日志('服务器正在运行！');这样，我们将构建一个我们需要的服务器。

对于服务器，接下来是前端跨域请求。

三.跨域请求旅程：

因为我们在脚本标签中借助src实现了请求，所以服务器中已经同意添加“/jsonp？回调'，将被视为jsONP请求，回调后会带入JS中已有的一个全局方法。

因此，代码可以如下所示：

！DOCTYPE html head title jsonp/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/head body脚本函数test(data){ alert(data . name)；};/script script src=' http :http://127 . 0 . 0 . 1:8080/jsonp？回调=test'/script/body/html OK，前端和后端编码。接下来，让我们看看效果。

首先启动节点服务器，如下所示：

注意：我把我们的server server.js放在了D:/JSONP里面

接下来，通过运行上面编写的html代码，您可以发现请求是成功的，并执行测试方法。

然而，我们一进来，就不得不提出跨域请求。是不是出了什么问题，所以我们可以动态创建脚本元素，指定相应的请求，让我们为所欲为？

如下所示：

//动态创建脚本标记并请求函数addscript tag(src){ var script=document . create element(' script ')；script.setAttribute('type '，' text/JavaScript ')；script.src=srcdocument.body.appendChild(脚本)；};//比如onload后，跨域请求窗口。onload=function(){ addscripttag(' http://127 . 0 . 0 . 1:8080/jsonp？callback=monkey’)；};//回调方法，而且必须是全局方法，否则会报错函数monkey(data){ alert(data)；};JSONP还需要注意回调函数的方法必须是全局的，否则会报错，因为是通过脚本的src请求的，请求成功后会立即执行。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。