【Node进阶之路】九. 接口

1. 简介

1-1. 接口是什么

接口是 前后端通信的桥梁

简单理解：一个接口就是 服务中的一个路由规则 ，根据请求响应结果

接口的英文单词是 API (Application Program Interface)，所以有时也称之为 API 接口

这里的接口指的是『数据接口』， 与编程语言（Java，Go 等）中的接口语法不同

1-2. 接口的作用

实现 前后端通信

1-3. 接口的开发与调用

大多数接口都是由 后端工程师 开发的， 开发语言不限

一般情况下接口都是由 前端工程师 调用的，但有时 后端工程师也会调用接口 ，比如短信接口，支付接口 等

1-4. 接口的组成

一个接口一般由如下几个部分组成

• 请求方法
• 接口地址(URL)
• 请求参数
• 响应结果

一个接口示例 www.free-api.com/doc/325

体验一下：api.asilu.com/idcard/?id=…

2. RESTful API

RESTful API 是一种特殊风格的接口，主要特点有如下几个：

• URL 中的路径表示 资源 ，路径中不能有 动词 ，例如 create , delete , update 等这些都不能有
• 操作资源要与 HTTP 请求方法 对应
• 操作结果要与 HTTP 响应状态码 对应

规则示例：

操作	请求类型	URL	返回
新增歌曲	POST	/song	返回新生成的歌曲信息
删除歌曲	DELETE	/song/10	返回一个空文档
修改歌曲	PUT	/song/10	返回更新后的歌曲信息
修改歌曲	PATCH	/song/10	返回更新后的歌曲信息
获取所有歌曲	GET	/song	返回歌曲列表数组
获取单个歌曲	GET	/song/10	返回单个歌曲信息

扩展阅读：www.ruanyifeng.com/blog/2014/0…

3. json-server

json-server 本身是一个 JS 编写的工具包，可以快速搭建 RESTful API 服务

官方地址: github.com/typicode/js…

操作步骤：

1. 全局安装json-server

   npm i -g json-server
   

2. 创建 JSON 文件（db.json），编写基本结构

   {
     "song": [
         { "id": 1, "name": "干杯", "singer": "五月天" },
         { "id": 2, "name": "当", "singer": "动力火车" },
         { "id": 3, "name": "不能说的秘密", "singer": "周杰伦" }
     ]
   }
   

3. 以 JSON 文件所在文件夹作为工作目录 ，执行如下命令

   json-server --watch db.json
   

默认监听端口为 3000

4. 跨域

4-1. 什么是跨域问题？

跨域问题指的是在 Web 应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。

如果不同源的 Web 应用程序需要通信，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。在此情况下，如果前端需要访问其他域名下的资源，就会出现跨域问题。

4-2. 为什么会出现跨域问题？

出现跨域问题的主要原因是同源策略的限制。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。

如果 Web 应用程序需要访问不同源的资源，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。这是因为跨域请求可能会导致一些安全问题，例如 CSRF（跨站请求伪造）攻击。

4-3. 什么情况下会出现跨域？

在 Web 应用程序中，以下情况可能会导致跨域问题：

• 域名不同：例如，当前页面的域名为 www.example.com，而请求的资源的域名为 api.example.com。
• 协议不同：例如，当前页面的协议为 https，而请求的资源的协议为 http。
• 端口号不同：例如，当前页面的端口号为 8080，而请求的资源的端口号为 9090。

4-4. 如何解决跨域问题？

在Node.js中，解决跨域问题的方案主要有两种：

1. CORS (主流的解决方案，推荐使用)
2. JSONP (有缺陷的解决方案，只支持GET请求)

4-5. CORS跨域资源共享

4-5-1. 使用cors中间件解决跨域问题

cors是Express的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便的解决跨域问题。

使用步骤分为如下 3 步：

1. 运行 npm installl cors 安装中间件
2. 使用 const cors = require('cors') 导入中间件
3. 在路由之前调用 app.use(cors()) 配置中间件

4-5-2. CORS的注意事项

1. CORS主要在 服务器端进行配置，客户端浏览器无须做任何额外的配置，即可请求开启了cors的接口。

2. CORS 在浏览器中有 兼容性，只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS的服务端接口(例如 IE10+、Chrome4+、FireFox3.5+)。

3. CORS 响应头部 - Access-Control-Allow-Orgin

   响应头部可以携带一个 Access-Control-Allow-Orgin 字段，其语法如下：

   Access-Control-Allow-Orgin：<orgin> | *
   

   其中，orgin 参数的值指定了允许访问该资源的外域 URL.

   例如，下面的字段将 只允许来自 itcast.cn 的请求：

   res.setHeader('Access-Control-Allow-Orgin','http://itcast.cn');
   

   如果指定了 Access-Control-Allow-Orgin的字段值为通配符*，表示允许来自任何域的请求，示例代码如下：

   res.setHeader('Access-Control-Allow-Orgin','*');
   

4. CORS 响应头部 - Access-Control-Allow-Headers

   默认情况下，CORS 仅支持客户端向服务器发送如下的9个请求头：

   Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)

   如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则这次请求会失败！

   // 允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
   // 注意：多个请求头之前使用英文逗号进行分割
   res.setHeader('Access-Control-Allow-Header', 'Content-Type, X-Custom-Header')
   

5. CORS 响应头部 - Access-Control-Allow-Methods

   默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求。

   如果客户端希望通过 PUT、DELETE等方式请求服务器资源，则需要在服务器端，通过 Access-Control-Allow-Methods来指明实际请求所允许的HTTP方法。

   示例代码如下：

   // 只允许POST,GET,DELETE,HEAD 请求方法
   res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')
   // 允许所有的 HTTP请求方法
   res.setHeader('Access-Control-Allow-Methods','*')
   

4-5-3. CORS请求的分类

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将CORS 的请求分为两大类，分别是：

1. 简单请求
2. 预检请求

简单请求

同时满足以下两大条件的请求，就属于简单请求：

1. 请求方式：GET、POST、HEAD 三者之一
2. HTTP头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)

预检请求

只要符合以下任何一个条件的请求，都需要进行预检请求：

1. 请求方式为GET、POST、HEAD之外的请求 Method类型
2. 请求头中包含自定义头部字段
3. 向服务器发送了application/json 格式的数据

在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。

简单请求与预检请求的区别：

简单请求的特点：客户端与服务器之间只会发生一次请求。

预检请求的特点：客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求。

4-6. JSONP

4-6-1. JSONP的概念与特点

概念：浏览器端通过

特点：

1. JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
2. JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。

4-6-2. 创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。示例代码如下：

// 优先创建 JSONP 接口[这个接口不会被处理成 CORS 接口 
app.get('/api/jsonp'，(req, res) => ( })
 
// 再配置 CORS 中间件[后续的所有接口，都会被处理成 CORS 接口
app.use(cors())

// 这是一个开启了 CORS 的接口
app.get('/api/get , (req, res) => ( })

4-6-3. 实现JSONP接口的步骤

1. 获取客户端发送过来的回调函数的名字
2. 得到要通过JSONP 形式发送给客户端的数据
3. 根据前两步得到的数据，拼接出一个函数调用的字符串
4. 把上一步拼接得到的字符串，响应给客户端的

4-6-4. 实现JSONP的具体代码

app.get('/api/jsonp'，(req， res) => {
  // 1.获取客户端发送过来的回调函数的名字
  const funcName = reg .query.callback
  // 2.得到要通过 JSONP 形式发送给客户端的数据
  const data = { name: 'zs', age: 22 }
  // 3.根据前两步得到的数据，拼接出一个函数调用的字符串
  const scriptStr =`${funcName}(${(JSON.stringify(data)})`
  // 4.把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
  res ,send( scriptStr)
})

4-6-5. 在网页中发起JSONP请求

s('#btnJSONP').on('click'，function () {
      $.ajax({
      method:' GET',
      url:"http://127.0.0.1/api/jsonp',
      dataType:jsonp，// 表示要发起 JSONP 的请求
      success: function (res) {
        console.log(res)
      }
   })
})

5. 接口测试工具

介绍几个接口测试工具

• apipost www.apipost.cn/ (中文)
• apifox www.apifox.cn/ (中文)
• postman www.postman.com/ (英文)