借助node实战JSONP跨域实例

下面是“借助node实战JSONP跨域实例”的完整攻略。

简介

在前后端分离的开发模式下，比较常见的一种跨域方案是JSONP。JSONP的原理是通过动态创建一个script标签，让浏览器去请求一个跨域的资源，因为script标签的src属性能够跨域请求资源，服务器端就可以将需要返回的数据放在一段回调函数中返回，浏览器解析这段数据并执行回调函数，从而达到跨域的目的。在本文中，我们将基于node.js来实现一个简单的JSONP跨域实例。

准备工作

在开始实现JSONP跨域实例之前，我们需要做一些准备工作：

1. 安装node.js：从node.js官方网站下载最新的node.js安装包，并安装在本地电脑上。

2. 创建一个新的工程目录，并在该目录下创建一个index.js文件。

3. 使用npm初始化项目并安装express和request包：打开命令行窗口，进入到新建的工程目录，执行以下命令：

bash
npm init -y
npm install express request --save

1. 创建一个project.json文件，添加如下内容：

json
{
"name": "jsonp-demo",
"version": "1.0.0",
"description": "JSONP跨域实例",
"main": "index.js",
"author": "Your Name",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"request": "^2.88.2"
}
}

该文件用于存储项目的相关配置信息和依赖包。

实现过程

接下来，我们将一步一步地实现JSONP跨域实例。我们将通过一个实际的例子来详细讲解如何使用node.js来实现JSONP跨域请求。

服务端实现

我们首先要在服务端实现一个接口，该接口接收客户端发来的请求，并返回JSONP格式的数据。具体步骤如下：

1. 引入相关依赖包和配置跨域请求头：

```js
const express = require('express');
const request = require('request');
const app = express();

// 配置跨域请求头
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});
```

在这里，我们引入了express和request两个依赖包，express用于搭建服务器，request用于向其他服务器发起请求。同时，我们还配置了跨域请求头，允许所有的来源进行跨域访问。

1. 定义服务端的接口：

```js
// 定义服务端的接口
app.get('/jsonp', function (req, res) {
let callback = req.query.callback; // 获取客户端传递的回调函数名
let url = 'http://api.jisuapi.com/weather/query';
let params = {
appkey: 'your_app_key',
city: '上海'
};

 // 发起请求获取天气数据
 request({url: url, qs: params}, function (error, response, body) {
   if (!error && response.statusCode == 200) {
     // 将获取到的天气数据封装在回调函数中返回
     res.send(`${callback}(${body})`);
   } else {
     res.send(error.message);
   }
 });

});
```

服务端接口的地址是“/jsonp”，该接口会获取客户端传递的回调函数名，拼接目标请求的url和参数，发起请求获取数据，并将获取到的数据封装在回调函数中返回给客户端。

客户端实现

客户端需要在网页中动态创建一个script标签，来发起JSONP请求，并处理服务端返回的数据。具体步骤如下：

1. 在html页面中引入jQuery和一个自定义的script标签：

```html

```

我们使用jquery来简化部分DOM操作，同时引入一个自定义的script标签“jsonp.js”。

1. 在jsonp.js中定义一个getJSONP函数：

js
// 动态创建script标签，发送jsonp请求
function getJSONP(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
head.appendChild(script);
// 回调函数名随机生成，确保每次请求的回调函数是唯一的
var callbackName = 'jsonp_' + Math.random().toString(36).substr(2);
window[callbackName] = function (data) {
callback && callback(data);
head.removeChild(script);
delete window[callbackName];
};
script.onerror = function () {
callback && callback({errorMsg: '请求失败，请重试！'});
head.removeChild(script);
delete window[callbackName];
};
}

该函数接收两个参数：目标url和回调函数名，动态创建一个script标签并将该url作为其src属性的值，将该标签添加至head标签中，此时浏览器会发起一个GET请求获取目标url数据。为了保证每次请求的回调函数名称唯一，我们通过随机生成一个字符串来实现，将该名称与获取数据的回调函数绑定，保证多次请求时的回调函数不会互相影响。当请求成功或失败时，我们可以在回调函数中进行相应的处理，最后将这个script标签删除，以便下一次请求。

1. 在html页面中调用getJSONP函数：

```html

```

我们在页面加载完毕后调用getJSONP函数，并将目标url和一个回调函数作为参数传递进去。在回调函数中，我们可以对获取到的数据进行处理，这里我们只是使用alert将数据msg属性值弹出来。

运行

以上所有的代码都编写完成后，我们就可以启动node服务器，将jsonp.js和html文件放到服务器上，通过访问html文件来执行getJSONP函数，发起JSONP跨域请求，获取到服务器端返回的数据。

这是其中的一种示例，具体实现可以根据实际情况进行修改，本质上是相同的：

1. 服务端：

```js
const express = require('express');
const app = express();

app.get('/getJSONP', (req, res) => {
const callback = req.query.callback;
const data = {
name: 'Jack',
age: 18,
email: '[e-mail]'
};
res.send(${callback}(${JSON.stringify(data)}));
});

app.listen(3000, () => {
console.log('Server started!');
});
```

1. 客户端：

```html

JSONP跨域

```

该示例中，服务端仅仅返回了一个数据对象，客户端将该对象进行解析，并根据其属性值进行展示。在实际开发中，我们可以通过请求第三方的数据接口来获取更加丰富的数据，也可以通过传递查询参数的方式来让接口返回不同的数据，从而满足不同场景的需求。

总结

本文详细讲解了如何使用node.js来实现JSONP跨域请求，通过一个实例来演示了该过程。在实际开发中，我们可以将这种技术应用到很多地方，如天气预报、新闻列表等场景，来帮助我们快速地获取一些非本站资源。需要注意的是，由于JSONP的本质是一种“坑”，存在一定的安全风险，所以在使用该技术时需要提前打好防护措施，例如在服务端对请求进行过滤和验证。