1、创建基本服务器
2、创建API路由模块
在apiRouter中:
const express = require('express')
const router = express.Router()
module.exports = router
在接口中:
const router = require('./16.apiRouter')
app.use('/api',router)
3、编写GET接口
router.get('/get',(req,res)=>{
const query = req.query
res.send({
status:0,
msg:'GET 请求成功',
data:query
})
})
用req.query获取客户端查询的字符串,发送到服务器的数据,接着调用res.send()方法将数据返回给客户端。
状态0表示成功,1表示失败
query就是需要响应给客户端的数据
4、编写POST接口
router.post('/post',(req,res)=>{
const body = req.body
res.send({
status:0,
msg:'POST 请求成功',
data:body
})
})
用req.body 获取请求体中包含url-encoded 格式的数据
在用res.send()方法,向而客户端响应结果
5、CORS(跨域资源共享)
5.1、什么是CORS
CORS是Express的一个第三方中间件
由一系列HTTP响应头组成,这些HTTP响应头决定浏览器是否组织前端JS代码跨域获取资源。
如果配置了CORS相关的HTTP响应头就可以解除浏览器端的跨域访问限制。
5.2、使用方式
//首先在中断执行
npm i cors
//在服务端导入中间件
const cors = require('cors')
//配置中间件
app.use(cors())
5.3注意事项
1、CORS主要在服务器端进行配置,在客户端无需做任何额外的配置。
2、CORS在浏览器中有兼容性,只在XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS的服务端接口。
5.5
CORS响应头部
Access-Control-Allow-Origin
Access-Control-Allow-Origin:<origin>|*
其中,origin参数制定了允许访问该资源的外域URL
res.setHeader('Access-Control-Allow-Origin','*')
*通配符,此段代码表示允许来自任何域的请求
Access-Control-Allow-Headers
res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')
'Content-Type,X-Custom-Header'表示两个请求头
Access-Control-Allow-Methods
默认情况下,CORS仅支持客户端发起GET,POST,HEAD请求。
res.setHeader('Access-Control-Allow-Headers','POST,GET,DELETE,HEAD')
//允许所有的HTTP请求方法
res.setHeader('Access-Control-Allow-Headers','*')
简单请求
客户端与服务器之间只会发生一次请求
请求方式:GET POST HEAD三者之一
预检请求
客户端与服务器之间只会发生两次请求,OPTION预检请求之后,才会发生真正的请求。
请求方式:GET POST HEAD之外的METHOD请求
请求头中包含自定义头部字段
向服务器发送了application/json格式的数据
JSONP
概念:通过
特点: 仅支持GET请求。
//再CORS中间件之前,配置JSONP接口
app.get('/api/jsonp',(req,res)=>{
//TODO:定义JSONP接口具体的实现过程
// 1.得到函数的名称
const funcName = req.query.callback
// 2.定义要发送到客户端的对象
const data = {name:'zs', age:20}
// 3.拼接出一个函数调用
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4.把拼接的字符串响应给客户端
res.send(scriptStr )
})