编写接口

1.自定义路由模块

const express=require('express')
const router=express.Router()// 挂载对应的路由
router.get('/get',(req,res)=>{// 通过req.query获取客户端通过查询字符串，发送到服务器的数据const query=req.query// 调用res.send()方法，向客户端响应处理的结果res.send({status:0,    // 0表示处理成功，1表示处理失败msg:'GET 请求成功',    //状态的描述data:query // 需要响应给客户端的数据 })
})// 定义post接口
router.post('/post',(req,res)=>{//通过req.body获取请求体中包含的url-encoded格式的数据const body=req.body//调用res.send()向客户端响应结果res.send({status:0,msg:'post 请求成功',   data:body})
})module.exports=router

2.将路由注册到服务器实例上

1.并且引入cors中间件注册到服务器实例上，解决跨域问题
2.将自定义路由模块挂载到服务器上，/api请求
3.express.urlencoded({extends:false} 解析表单中间件

// 导入express
const express=require('express')
// 创建服务实例
const app=express()// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)// 启动服务器
app.listen(8080,()=>{console.log('Express server running st http://127.0.0.1:8080');
})

测试接口跨域问题

在导入路由模块前，将cors中间件注册到服务器实例上

// 导入express
const express=require('express')
// 创建服务实例
const app=express()// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)// 启动服务器
app.listen(8080,()=>{console.log('Express server running st http://127.0.0.1:8080');
})

cors介绍：

使用express写接口

CORS响应头

1.Access-Control-Allow-Origin

允许那些网站能够请求

2.限制客户端发送过来的请求头：Access-Control-Allow-Headers
客户端发送请求过来，不能发送额外的请求头信息，因为CORS设定好了，除非在服务端对 Access-Control-Allow-Headers 进行声明

3.限制请求方式：Access-Control-Allow-Methods

4.简单请求

5.预检请求
就是对CORS默认的放行资源之外的请求就叫预检请求

简单请求和预检请求的区别

JSONNP接口

1.概念：

JSONP是一个跨域解决方案，目的是跨域请求JSON数据，因为JSON数据是不能跨域请求的，但是我们js跨域请求js脚本是可以的，可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本即可获取数据

• 1. 标签script的src属性是可以跨域的，所以我们跨域的服务器只要写成调用本地的函数，回调数据就可以实现跨域了
• 2. 过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）
• 3. 恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。
     

注意事项：

2.实践，实现JSONP接口的步骤：

代码：

// 导入express
const express=require('express')
// 创建服务实例
const app=express()// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))// 配置json接口(必须在配置cors中间件前配置jsonp接口)
app.get('/api/jsonp',(req,res)=>{
//   1.得到回调函数的名称
const funcName=req.query.callback //   2.定义要发送到客户端的数据对象（回调的数据）
const data={ name: 'zs', age: 22 }
//   3.拼接出函数调用的字符串（请求的名称+数据）
const scriptStr = `${funcName}(${JSON.stringify(data)})`
//   4.把拼接的字符串响应给客户端res.send(scriptStr)
})// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)// 启动服务器
app.listen(8080,()=>{console.log('Express server running st http://127.0.0.1:8080');
})

网页：

getpostdeletejsonp

测试发现得到回调后服务端所发来的数据