跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP、HTML5、Flash、iframe、xhr2等。

这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家分享。

JSONP跨域原理探秘

我们知道,使用 XMLHTTPRequest 对象发送HTTP请求时,会遇到 同源策略 问题,域不同请求会被浏览器拦截。

那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢?

换句话说,不使用 XMLHTTPRequest 对象是否可以发送跨域HTTP请求呢?

细心的你可能会发现,像诸如:

<script type="text/javascript" src="http://www.a.com/scripts/1.js"></script>

<img src="http://www.b.com/images/1.jpg" />

<link rel="stylesheet" href="http://www.c.com/assets/css/1.css" />

这种标签是不会遇到"跨域"问题的,严格意义上讲,这不是跨域,跨域是指在脚本代码中向非同源域发送HTTP请求,这只是跨站资源请求。

那么,我们是否可以利用跨站资源请求这一方式来实现跨域HTTP请求呢?

以<script></script>标签为例进行探索,先看一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片断1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
    <!-- JavaScript片断2 -->
    <script type="text/javascript">
        handler('success');
    </script>
</head>
<body>
    A JSONP demo.
</body>
</html>

这段代码中,有2个JavaScript片断,第1个片断中定义了一个处理函数handler(),这个处理函数比较简单,没有对数据做任何处理,只是把它alert出来;第2个片断调用了它,运行这个页面浏览器会弹出"success"。

我们假设第2个JavaScript片断存储在别的地方,然后我们使用<script src="" />的方式把它引入进来,像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片断1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
    <!-- JavaScript片断2 -->
    <script type="text/javascript" src="http://service.a.com/script/1.js"></script>
</head>
<body>
    A JSONP demo.
</body>
</html>

service.a.com/script/1.js:

1
handler('success');

这种方法和把JavaScript代码直接写在页面是等效的,但是,我们由此可以联想到什么?

我们是否可以事先在本页面定义处理程序,服务端返回JS脚本,脚本的内容就是对处理程序的回调,服务返回的数据通过参数的形式传回:

handler('服务返回的数据');

然后通过动态向当前页面head节点添加<script src="服务地址"></script>节点的方式来“伪造”HTTP请求?

于是,可以编写这样一个简单的测试用例:

先写服务端,非常简单的一个服务,返回字符串"Hello World",一般处理程序Service.ashx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace JSONPDemo.Service
{
    /// <summary>
    /// Service2 的摘要说明
    /// </summary>
    public class Service2 : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("handler('Hello World');");
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

再写客户端,一个简单的静态Web页,index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        // 跨域发送HTTP请求,从服务端获取字符串"Hello World"
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src''http://localhost:8546/Service.ashx');
            document.querySelector("head").appendChild(script);
        }
        // 处理函数
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
</head>
<body>
    <input type="button" value="发送跨域HTTP请求,获取Hello World" onclick="getHello()" />
</body>
</html>

测试成功!

在这个测试例子中,我们使用一般处理程序编写了一个简单的返回Hello World的服务,然后使用动态创建<script></script>节点的方式实现了跨域HTTP请求。

由于<script>、<img>标签资源请求是异步的,所以我们就实现了一个跨域的异步HTTP请求。

但是这么做是不够的,一个页面可能会有多个HTTP请求,而上面这个示例的处理程序只有一个——handler。

不同的请求应该由不同的处理程序来处理,对上面的代码稍做修改,只需要给<script>标签的src属性中的URL添加一个参数来指定回调函数的名称就可以了:

服务端:

1
2
3
4
5
6
7
8
9
10
11
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
 
    // 前端指定的回调函数名称
    var callbackFuncName = context.Request.QueryString["callback"];
    var responseData = "Hello World";
    // 回调脚本,形如:handler('responseData');
    var scriptContent = string.Format("{0}('{1}');", callbackFuncName, responseData);
    context.Response.Write(scriptContent);
}

Web客户端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jsonp demo</title>
    <script type="text/javascript">
        // 跨域发送HTTP请求,从服务端获取字符串"Hello World"
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src', 'http://localhost:8546/Service.ashx?callback=handler');//callback指定回调函数名称
            document.querySelector("head").appendChild(script);
        }
        // 处理函数
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
 
</head>
<body>
    <input type="button" value="发送跨域HTTP请求,获取Hello World" onclick="getHello()" />
</body>
</html>

使用jQuery的JSONP跨域

jQuery的ajax方法对JSONP式跨域进行了封装,如果使用jQuery进行JSONP原理式的跨域HTTP请求,将会变得非常简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery jsonp demo</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "get",
            async: false,
            url: "http://localhost:8546/Service.ashx",
            dataType: "jsonp",
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert('fail');
            }
        });
    </script>
</head>
<body>
    使用jQuery一切将会变得非常简单。
</body>
</html>

只需要将dataType设置成"jsonp"就可以进行跨域请求了,一切就像发送非跨域请求那样简单。

jQuery为我们封装好了回调函数,一般情况下不需要我们单独去写,如果你不想在success中处理,想单独写处理函数,那么可以通过设置这2个参数来实现:

  • jsonp: "callback",//传递给服务端的回调函数名称参数,如果不设置此项,则默认是"callback"
  • jsonpCallback: "handler",//传递给服务端的回调函数名称,如果不设置此项,则默认是形如"jQuery111007837897759742043_1460657212499"的由jQuery自动生成的函数名称

必须要强调的是:

1.JSONP虽然看起来很像一般的ajax请求,但其原理不同,JSONP是对文章第一小节原理的封装,是通过<script>标签的动态加载来实现的跨域请求,而一般的ajax请求是通过XMLHttpRequest对象进行;

2.JSONP不是一种标准协议,其安全性和稳定性都不如 W3C 推荐的 CORS

3.JSONP不支持POST请求,即使把请求类型设置为post,其本质上仍然是一个get请求。

跨域解决方案二:使用JSONP实现跨域的更多相关文章

  1. JS理论-跨域解决方案

    一: 用过JS跨域 1.JSONP跨域(利用script标签不受网站同源策略影响) 2.documen.domian跨域(通过指定基础域名,达到在一个域) 二: 通过服务器跨域 1.通过代理服务器,比 ...

  2. 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  3. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  4. 第十四节:Asp.Net Core 中的跨域解决方案(Cors、jsonp改造、chrome配置)

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  5. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  6. 跨域两种解决方案CORS以及JSONP

    一.CORS设置请求头 设置请求头实现跨域: //跨域的浏览器会让请求带Origin头,表明来自哪里的跨域请求 Origin: http://xxx.example //表明允许跨域访问 Access ...

  7. 前端跨域(二):JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  8. ajax跨域请求解决方案 CORS和JSONP

    什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...

  9. 跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

随机推荐

  1. Tomcat配置并启用HTTPS

    参考文献:http://www.cnblogs.com/xdp-gacl/p/3744053.html#blogTitle2 概述:用sun公司提供的keytool(位置为<JAVA_HOME& ...

  2. Sort 整理

    文章.图片参考:http://www.jianshu.com/p/1b4068ccd505?hmsr=toutiao.io&utm_medium=toutiao.io&utm_sour ...

  3. Python 开发与测试 Webservice(SOAP)

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 理解WebService 1.从表面上看,WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是 ...

  4. union联合体使用详解

    1.联合体联合体(union)与结构体(struct)有一些相似之处.但两者有本质上的不同.在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和.而在联合体中,各成员共享一段内存 ...

  5. NopCommerce源码分析ContainerBuilder builder.Update(container)

    /// <summary> /// Register dependencies /// </summary> /// <param name="config&q ...

  6. Tomcat服务器原理详解

    [目录]本文主要讲解Tomcat启动和部署webapp时的原理和过程,以及其使用的配置文件的详解.主要有三大部分: 第一部分.Tomcat的简介和启动过程 第二部分.Tomcat部署webapp 第三 ...

  7. IIS站点无法访问..点浏览IIS窗口直接关掉

    呃..其实这个问题很简单.. 大家可以先看这位大婶写的博文.. http://blog.csdn.net/chenguang79/article/details/7220232 如果网站一访问IIS就 ...

  8. chrome调试文章

    http://blog.csdn.net/a6225301/article/details/20207191#t1 http://www.360doc.com/content/13/1220/11/8 ...

  9. ajax实例详解(2)

    说到ajax当然离不开json格式了.在ajax的数据传递过程中用到最多的便是json格式了吧. 什么是json格式,在刚开始用它的时候,着实让人迷茫了一阵子呀.说的白了点所谓json不就是一种数据的 ...

  10. Java Lambda表达式入门

    Java Lambda表达式入门 http://blog.csdn.net/renfufei/article/details/24600507 Java 8十个lambda表达式案例 http://w ...