位置: 编程技术 - 正文
推荐整理分享借助node实战JSONP跨域实例(如何使用nodejs),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:怎么用node.js写接口,用nodejs写接口优缺点,node jsonp,node js import,node json,node json,用nodejs写接口优缺点,node json,内容如对您有帮助,希望把文章链接给更多的朋友!
一、前言:
浏览器安全是基于同源策略的。所谓同源策略就是三相同:
1、协议相同;
2、域名相同;
3、端口相同。
但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP。
JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此);然后服务器将相应的数据放入指定的函数回调名中,返回给前端。
这,就实现了跨域请求信息。
如下图所示:
了解了JSONP的大体思路,接下来,我们借助node来搭建一个简单的服务器,与前端一步步实现JSONP带来的跨域请求之旅吧。
二、搭建node server:
因为前端要实现跨域请求,需要与后台配合。在这里,我们使用是node来模拟后台服务器。
So,你得对node有一定认识以及开发环境。
接下来,我们就编写一个简单的node服务器吧。
首先,我们需要引入http模块,因为是基于http请求的嘛。然后就是用其创建一个http服务器,如监听的是端口。
如下:
接着,因为我们要对使用JSONP的请求与正常请求区分,所以,后台得判断处理—通过解析url字符串,假设这里我们是通过带有'/jsonp'的路径名来判断。
如下:
在上面的代码中行,有个缺点就是,我们将回调函数的名字规定死了,当我们判断请求为JSONP时,只能往前端传入test,这样显然不合理。
所以,我们得借助于querystring 这个模块,来处理query字符串。
如下:
这样,我们就将一个我们需要的服务器搭建好了。
服务器有了,接下来,就是前端跨域请求了。
三、JSONP跨域请求之旅:
因为我们是借助于<script>标签中的src来实现请求的,在服务器中已经约定,在请求后加入'/jsonpcallback',就将其认定为JSONP请求,且callback后带入一个js中已有的全局方法。
所以,代码可以如下:
好了,前后端都编码完毕,接下来,我们就看看效果吧。
首先启动node服务器,如下:
注:我将我们搭建的服务器server.js放在D:/JSONP中
接下来,运行上面所写的html代码,可以发现请求成功,并执行test方法。
但,我们一进来,就得跨域请求,是否有点不妥,所以可以动态创建script元素,并指定相应请求,任由我们所为。
如下:
JSONP还需要注意的就是,回调函数的方法必须是全局的,不然会报错的,因为是通过script的src请求的嘛,请求成功后立即执行。
标签: 如何使用nodejs
本文链接地址:https://www.jiuchutong.com/biancheng/377907.html 转载请保留说明!友情链接: 武汉网站建设