跨域解决方案二：使用JSONP实现跨域

时间 2019-11-18

标签解决方案使用 jsonp 实现栏目 JSON 繁體版

原文原文链接

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

这篇文章对JSONP的跨域原理进行了探索，并将个人心得记录在这里和你们分享。css

JSONP跨域原理探秘

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

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

换句话说，不使用 XMLHTTPRequest 对象是否能够发送跨域HTTP请求呢？java

细心的你可能会发现，像诸如：jquery

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

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

那么，咱们是否能够利用跨站资源请求这一方式来实现跨域HTTP请求呢？

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

<!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="" />的方式把它引入进来，像这样：

<!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：

handler('success');

这种方法和把JavaScript代码直接写在页面是等效的，可是，咱们由此能够联想到什么？

咱们是否能够事先在本页面定义处理程序，服务端返回JS脚本，脚本的内容就是对处理程序的回调，服务返回的数据经过参数的形式传回：

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

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

因而，能够编写这样一个简单的测试用例：

先写服务端，很是简单的一个服务，返回字符串"Hello World"，通常处理程序Service.ashx:

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:

<!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添加一个参数来指定回调函数的名称就能够了：

服务端：

        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客户端：

<!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跨域

在上面的章节咱们探及了JSONP跨域的原理。幸运的是，咱们并不须要每次都写这么多代码来完成一次跨域请求。

jQuery的ajax方法对JSONP式跨域请求进行了封装，若是使用jQuery进行JSONP式跨域请求，代码将会变得很是简单：

<!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",
            url: "http://localhost:8546/Service.ashx",
            dataType: "jsonp",//必定要指明为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自动生成的函数名称，会自动在$.ajax方法的success中完成调用。

必需要强调的是：

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

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

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

demo下载(1507)

JavaScript中的跨域解决方案汇总：

跨域解决方案一：使用CORS实现跨域

跨域解决方案二：使用JSONP实现跨域