借助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"(同源 ...
随机推荐
- 第2章 新手必须掌握的Linux命令
第2章 新手必须掌握的Linux命令 章节简述: 本章节讲述系统内核.Bash解释器的关系与作用,教给读者如何正确的执行Linux命令以及常见排错方法. 经验丰富的运维人员可以恰当的组合命令与参数 ...
- 通读AFN①--从创建manager到数据解析完毕
流程梳理 今天开始会写几篇关于AFN源码解读的一些Blog,首先要梳理一下AFN的整体结构(主要是讨论2.x版本的Session访问模块): 我们先看看我们最常用的一段代码: AFHTTPSessio ...
- [转]Android ListView 与 RecyclerView 对比浅析—缓存机制
从源码角度剖析ListView 与 RecyclerView 缓存机制的不同 https://zhuanlan.zhihu.com/p/23339185 原文地址:http://dev.qq.com/ ...
- python安装完毕后，提示找不到ssl模块的解决步骤
转载自 醇酒醉影 python安装完毕后,提示找不到ssl模块: [root@localhost ~]# python2.7.5 Python 2.7.5 (default, Jun 3 2013, ...
- Jenkins部署配置简介
前段时间研究了一下自动化测试,因而接触到了Jenkins,今天有时间进行一下Jenkins部署配置相关知识的总结分享 前言:由于本次只是实验性研究,采用Windows环境,因此Jenkins可以通过下 ...
- (转)Vsdocman7.2 注册版
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...
- DoTween 应用设置
一.下载 官方下载地址:http://dotween.demigiant.com/download.php 二.安装 1.把下载到压缩包中的DOTween文件夹拷贝到项目文件中 2.安装DOTween ...
- 初步认识Less
LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观.LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap).本文将介绍 LE ...
- 提取bmp图片的颜色信息，可直接framebuffer显示（c版本与python版本）
稍微了解了下linux的framebuffer,这是一种很简单的显示接口,直接写入像素信息即可 配置好的内核,会有/dev/fbn 的接口,于是想能否提前生成一个文件,比如logo.fb,里面仅包含像 ...
- JAVA笔试题集（一）--JAVASE部分
红色答案为参考答案 1.从下列选项中选择正确的Java表达式(多选) A. int k=new String("aa"); B. String str=String ...