前言
接口是前后端的一座桥梁。接口是后端设计的一套供给第三方使用的方法。(第三方指前端/后端)接口通过网络协议来调用，最常用的协议是HTTP协议。在定义一个接口时，会写好接口路径和接口方法名的映射，然后前端通过接口路径来调用方法，接下来就看看什么是接口。
1. get接口
●模块的封装，将封装好的模块通过module.exports进行向外暴露，是其他的可以使用该路由模块
const express = require('express'); const router = express.Router(); // 挂载对应路由模块 router.get('/get', (req, res) => { const query = req.query; // 调用send方法向客户端响应处理结果 res.send({ status: 0, //0=成功，1=失败 masg: 'Get请求成功', // 状态描述 data: query // 响应给客户端 }) }) module.exports = router;
●将封装好的模块进行导入
const express = require('express') const app = express() // 导入路由模块 const router = require('./02.apiRouter') // 挂载路由模块到app上面 app.use('/api', router); app.listen(80, () => { console.log('express server running at http://127.0.0.1'); })
测试get接口
$('#btnGET').on('click', function () { // 测试GET接口 $.ajax({ type: 'GET', url: 'http://127.0.0.2/api/get', data: { name: 'ss', age: 12 }, success: function (res) { console.log(res); }, }) })
2.post接口
router.post('/post', (req, res) => { const body = req.body // 调用send方法向客户端响应处理结果 res.send({ status: 0, msg: 'POST请求成功！', data: 'body' }) })
测试post接口
$('#btnPOST').on('click', function () { // 测试POST接口 $.ajax({ type: 'POST', url: 'http://127.0.0.2/api/get', data: { name: 'ss', age: 12 }, success: function (res) { console.log(res); }, }) })
不要忘记配置一下这个中间件在另一个文件里
3.跨域问题
GET和POST接口，存在一个很严重的问题:不支持跨域请求。
解决接口跨域问题的方案主要有两种：①CORS (推荐使用，都支持) ②JSONP (有缺陷，只支持GET请求)
1.CROS是什么
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头, 就可以解除浏览器端的跨域访问限制。
2.使用CROS解决跨域问题
第一步:npm i cors 安装cors中间件
第二步：const cors require('cors') 导入中间件
第三步：调用app.use(cors()) 配置中间件（在路由之前调用）
3.CORS请求的分类
客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类
①简单请求 ②预检请求
简单请求:
①请求方式: GET. POST、 HEAD三者之一 ②HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept. Accept-Language、 Content-Language、 DPR、 Downlink、Save-Data、 Viewport-Width、 Width 、Content-Type (只有三个值application/x-www-form- urlencoded、multipart/form-data、 text/plain)
预检请求:
①请求方式为 GET、POST、HEAD 之外的请求Method类型 ②请求头中包含自定义头部字段 ③向服务器发送 了application/jison 格式的数据
特点：
简单请求的特点:客户端与服务器之间只会发生一次请求。 预检请求的特点:客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求。
4.编写jsonp的接口
如果已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。
配置jsonp接口，由于jsonp没有在router中所以得加上‘/api’
// jsonp接口必须配置到cors之前 app.get('/api/jsonp', (req, res) => { // 定义jsonp接口 // 获得函数名 const funcName = req.query.callback; // 定义要发送到客户端的数据对象 const data = { name: 'qw', age: 12 } // 拼接一个函数调用 const scriptStr = `${funcName}(${JSON.stringify(data)})` // 把所拼接的字符串响应给客户端 res.send(scriptStr) })
2.绑定事件按钮
// 为jsonp事件绑定按钮 $(`#btnJSONP`).on('click', function () { $.ajax({ type: 'GET', url: 'http://127.0.0.1', dataType: 'jsopn', success: function (res) { console.log(res); } }) })
🐸本章小结：这一路走来困难也有喜悦也有，也曾为了代码熬到一两点钟，也曾有过离家出走的头发，但是这些都将成为我的无形筹码。正如我见青山多妩媚，料青山见我应如是，努力向前，付出不会辜负每一个人的，幸运女神也会眷顾你的！继续加油继续淦！
