借助node实战JSONP跨域
| 一、前言： |
浏览器安全是基于同源策略的。所谓同源策略就是三相同：
1、协议相同；
2、域名相同；
3、端口相同。
但，凡事都是有利弊，同源策略也导致了我们想用AJAX跨域请求，但NO！！为了规避这种限制，其中有一方法就是JSONP。
JSONP的基本思想：就是通过<script>的src，向服务器请求数据，且这不受同源策略限制（img和iframe的src也是如此）；然后服务器将相应的数据放入指定的函数回调名中，返回给前端。
这，就实现了跨域请求信息。
如下图所示：
了解了JSONP的大体思路，接下来，我们借助node来搭建一个简单的服务器，与前端一步步实现JSONP带来的跨域请求之旅吧。
| 二、搭建node server： |
因为前端要实现跨域请求，需要与后台配合。在这里，我们使用是node来模拟后台服务器。
So，你得对node有一定认识以及开发环境。（可参见“初探nodeJS”）。
接下来，我们就编写一个简单的node服务器吧。
首先，我们需要引入http模块，因为是基于http请求的嘛。然后就是用其创建一个http服务器，如监听的是8080端口。
如下：
'use strict';
//通过require将http库包含到程序中
var http = require('http');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
res.end('Hell World\n');
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');
接着，因为我们要对使用JSONP的请求与正常请求区分，所以，后台得判断处理—通过解析url字符串，假设这里我们是通过带有’/jsonp’的路径名来判断。
如下：
'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
var urlPath = url.parse(req.url).pathname;
//如果urlPath为'jsonp'，就认定该请求为携带jsonp方法的http请求
if(urlPath === '/jsonp'){
res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
var data = {
"name": "Monkey"
};
data = JSON.stringify(data);
//假设我们定义的回调函数名为test
var callback = 'test'+'('+data+');';
res.end(callback);
}
else{
res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
res.end('Hell World\n');
}
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');
在上面的代码中19行，有个缺点就是，我们将回调函数的名字规定死了，当我们判断请求为JSONP时，只能往前端传入test，这样显然不合理。
所以，我们得借助于querystring 这个模块，来处理query字符串。
如下：
'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
var urlPath = url.parse(req.url).pathname;
var qs = querystring.parse(req.url.split('?')[1]);
if(urlPath === '/jsonp' && qs.callback){
res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
var data = {
"name": "Monkey"
};
data = JSON.stringify(data);
var callback = qs.callback+'('+data+');';
res.end(callback);
}
else{
res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
res.end('Hell World\n');
}
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');
这样，我们就将一个我们需要的服务器搭建好了。
服务器有了，接下来，就是前端跨域请求了。
| 三、JSONP跨域请求之旅: |
因为我们是借助于<script>标签中的src来实现请求的，在服务器中已经约定，在请求后加入’/jsonp?callback’，就将其认定为JSONP请求，且callback后带入一个js中已有的全局方法。
所以，代码可以如下：
<!DOCTYPE html>
<head>
<title>jsonp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function test(data){
alert(data.name);
};
</script>
<script src="http://127.0.0.1:8080/jsonp?callback=test"></script>
</body>
</html>
好了，前后端都编码完毕，接下来，我们就看看效果吧。
首先启动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请求的嘛，请求成功后立即执行。
借助node实战JSONP跨域的更多相关文章
- node实现jsonp跨域
1. 搭建node server //引入模块 var http=require("http"); var fs=require("fs");var url = ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- 原产地政策，jsonp跨域
一.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最主要的安全功能,假设缺少了同源策略,则浏览器的正常功能可能都会受到影响.能够 ...
- 06: AJAX全套 & jsonp跨域AJAX
目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...
- 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 深入浅出：了解jsonp跨域的九种方式
什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- jsonp跨域+ashx（示例）
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
随机推荐
- IE11 上的3个bug
1.IE 11在popstate上无法正常使用,所以,需要使用老方法hashchange.有一个叫History.js的library,是可以解决这个问题.但如果url在"#"后跟 ...
- 干掉命令行窗口下MySql乱码
晚上重温dos窗口操作mysql的时候,遇到了一个巨蛋疼的问题------>中文验证码 -->_-->,所以找了找资料弄懂了怎么解决乱码问题,,小记一下. 新建一个表 create ...
- iptables 思维导图 (zz)
- java关于ArrayList中toArray方法的使用
先来看下面这段程序 Collection collect= new ArrayList(); collect.add("小黑"); collect.add("小白 ...
- sql rowversion
RowsVersion就是timestamp 丢失更新的解决方法 丢失更新概念:当用户同时修改一行数据,他们先读取数据,放在前端进行修改,当修改后,再提交数据,这样最后提交的数据会覆盖先 ...
- FAT32 FAT区__FAT表解析
一. FAT 表概述 位置: 紧跟在文件系统的“保留区”之后 : 有两个数据结构完全相同的FAT(FAT,File Allocation Tbale 文件分配表)组成. 作用: FAT表项,描述文件系 ...
- 安装jdk
检查已安装jdk,如果有,先删除 rpm -qa|grep java rpm -e --nodeps filename 从oracle官方网站下载jdk安装包:jdk-8u111-linux-x64. ...
- 开源消息队列：NetMQ
NetMQ 是 ZeroMQ的C#移植版本. ZeroMQ是一个轻量级的消息内核,它是对标准socket接口的扩展.它提供了一种异步消息队列,多消息模式,消息过滤(订阅),对多种传输协议的无缝访问. ...
- .Net 跨平台可移植类库正在进行
[原文发表地址] Cross-Platform Portable Class Libraries with .NET are Happening [译文发表地址] .Net 跨平台可移植类库正在进行 ...
- 梦想还需有，因它必实现——发现最新版iOS漏洞，OverSky团队专访
梦想还需有,因它必实现——发现最新版iOS漏洞,OverSky团队专访 “成功了!”,随着一句欢呼声在阿里巴巴西溪园区传出,Cydia的图标出现在一部iOS9.3.4的iPhone6上并成功运行 ...