教你如何使用JSONP实现跨域

么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP跨域的基本原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

{"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：

foo({"id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：

便可以使用foo函数来调用返回的数据了。

JSONP跨域原理探秘

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

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>jsonp demo</title>

function handler(data) {

alert(data);

// our code here...

}

</script>

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>

<title>jsonp demo</title>

function handler(data) {

alert(data);

// our code here...

}

</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>

// 跨域发送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>

</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>

<title>jsonp demo</title>

// 跨域发送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>

</body>

</html>

使用jQuery的JSONP跨域

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

<!DOCTYPE html>

<html>

<head>

<title>jQuery jsonp demo</title>

$.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请求。

、使用跨文档消息传递（Cross-document Messaging）

可以在不同窗口或iframe之间安全地传递消息，即使这些窗口或iframe来自不同的域。以下是使用window.postMessage()方法进行跨域消息传递的基本示例：

假设有两个页面：page1.html和page2.html，它们分别位于不同的域。

在page1.html中，我们想要向page2.html发送消息：

<!-- page1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
</head>
<body>
    <button id="sendMessageBtn">Send Message to Page 2</button>

    <script>
        const sendMessageBtn=document.getElementById('sendMessageBtn');

        // 监听按钮点击事件
        sendMessageBtn.addEventListener('click', function() {
            // 获取目标窗口的引用
            const targetWindow=window.parent.frames['page2-frame'];

            // 向目标窗口发送消息
            targetWindow.postMessage('Hello from Page 1!', 'http://www.example.com/page2.html');
        });
    </script>
</body>
</html>

在page2.html中，我们接收来自page1.html的消息：

<!-- page2.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
</head>
<body>
    <iframe src="http://www.example.com/page1.html" name="page1-frame" id="page1-frame"></iframe>

    <script>
        // 监听来自其他窗口的消息
        window.addEventListener('message', function(event) {
            // 判断消息来源是否是预期的域
            if (event.origin==='http://www.example.com') {
                // 处理收到的消息
                console.log('Received message from Page 1:', event.data);
            }
        });
    </script>
</body>
</html>

page1.html包含一个按钮，当点击按钮时，会向page2.html发送消息。page2.html中通过监听window对象的message事件来接收来自page1.html的消息，并且只有当消息的来源是预期的域时才会处理该消息。

需要注意的是，跨文档消息传递仅在现代浏览器中得到支持，且需要发送消息的窗口或iframe引用以及目标窗口的域。以前的IE浏览器啥的是不支持的。这种方式较为简单，方便初学者进行测试。

二、还有一种办法较为复杂，可以利用代理服务器，通过在同一域下设置一个代理服务器，将跨域请求发送到该代理服务器上，再由代理服务器转发请求到目标服务器。这种方法需要在服务器端实现代理，但可以绕过浏览器的跨域限制。

另外还有两种较为简单的方式也做一下介绍，下面这2种方式是常用的方式了，较为简单，

三、JSONP（JSON with Padding）：JSONP是一种利用<script>标签的GET请求实现跨域数据传输的技术。它允许从其他域加载数据，但只支持GET请求，且需要目标服务器支持返回JavaScript回调函数。JSONP的缺点是安全性较低，仅能进行GET请求。

四、CORS（Cross-Origin Resource Sharing）：CORS是一种现代的跨域资源共享机制，它允许服务器端设置HTTP头部，以允许在不同域之间的安全数据传输。通过在服务器端配置，可以允许跨域请求发送和接收数据。

五、WebSocket：得利于HTML5技术的发展，现在主流浏览器的支持，WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通讯的协议，它可以与任意域的服务器进行通讯，但需要服务器端支持WebSocket协议。

在客户端，我们可以使用JavaScript来创建WebSocket连接：

// 客户端代码
const socket=new WebSocket('ws://example.com:8080'); // 替换为实际的WebSocket服务器地址

// 当WebSocket连接成功建立时触发
socket.onopen=function(event) {
    console.log('WebSocket连接已建立');
    
    // 向服务器发送数据
    socket.send('Hello from client!');
};

// 当接收到来自服务器的消息时触发
socket.onmessage=function(event) {
    console.log('Received message from server:', event.data);
};

// 当发生错误时触发
socket.onerror=function(error) {
    console.error('WebSocket发生错误:', error);
};

// 当WebSocket连接关闭时触发
socket.onclose=function(event) {
    console.log('WebSocket连接已关闭');
};

在服务器端，您需要使用相应的语言和框架来创建WebSocket服务器。以下是一个简单的Node.js示例：

家好，我是前端西瓜哥。今天讲 JSONP。

JSONP，是 JSON with Padding 的缩写，字面上的意思就是 “填充 JSON”。JSONP 是解决跨域请求的一种方案，我们先了解下跨域请求是什么。

跨域

浏览器在跨域发送 Ajax/fetch 请求时，会触发浏览器的同源策略，导致请求失败。

只要协议、域名、端口有一个不同，那浏览器就会认为是跨域。比如你在 a.com 下通过 Ajax 请求 b.com/api/book，默认情况下就被浏览器拦截，导致无法获得返回数据。

具体跨域的知识点，可以看我的这篇文章《为什么浏览器不能跨域发送 ajax 请求？》

JSONP 怎么跨域？

既然 Ajax 不能发送跨域请求，那我们不用 Ajax，改用 script 标签。

HTML 下的 script 标签会指向一个脚本地址，这个地址允许跨域，浏览器会加载这个脚本然后执行。

除了 script 标签， link、img 等标签的请求也是允许跨域的。

下面以通过用户 id 获取用户信息为例。

前端实现

在 script 标签的 src 上，我们指定好需要服务器进行填充的回调函数名 setUser，并带上用户 id。

<script src="http://b.com:4000/user?id=2&callback=setUser"></script>

上面这种直接这样写到 HTML 里不太灵活，我们改写成下面这样。

let user = null;
function setUser(user) {
  // 保存用户信息
  window.user = user;
  
  // 输出到页面上，看看效果。
  document.body.append(
    JSON.stringify(user);
  );
}
function getUserById(id) {
  const script = document.createElement('script');
  script.src = `http://b.com:4000/user?id=${id}&callback=setUser`;
  document.body.appendChild(script);
}
document.querySelector('button').onclick = function() {
  getUserById(2);
}

后端实现

然后是服务端的处理，这里我用了 Nodejs 的 Express 框架。

const app = express();
// ...
const map = {
  1: { name: 'fe_watermelon' },
  2: { name: '前端西瓜哥' }
};
// 例子：/user?id=2&callback=setUser
app.get('/user', (req, res, next) => {
  const { id, callback } = req.query;
  res.send(`${callback}(${JSON.stringify(map[id])})`);
});
// ...

服务端从 url 的请求字段中提取出 id ，找到对应的用户信息（通常为 JSON 的形式），配合要填充的回调函数 setUser，组装成字符串 setUser({"name":"前端西瓜哥"})

这个内容会作为脚本内容返回给前端，前端运行这个脚本后，就会执行全局作用域下的 setUser 函数，这个函数还会拿到用户信息，将其保存下来。

演示效果

结尾

JSONP 是一种解决跨域的方案，但一般比较少用到。

因为 JSONP 并不是标准，也不安全，服务端代码没写好会有代码注入的风险，且无法防范跨站请求伪造（CSRF）攻击。

我们也注意到要兜住返回的数据，必须定义一个全局的函数，在如今主流的模块化（变量隔离在各个模块中不暴露到全局）写法下有点格格不入。

我是前端西瓜哥，喜欢写技术文章，欢迎关注我。

在线咨询

上一篇：我们为何总是迷恋摩天大楼？- 读刊
下一篇：使用wget 镜像下载网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

教你如何使用JSONP实现跨域

跨域

JSONP 怎么跨域？

前端实现

后端实现

演示效果

结尾

您的项目需求