Express接口编写

113 阅读2分钟

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 )
})