使用Express写接口

apiRouter

const express = require('express')
const router = express.Router()

// 在这里挂载对应的路由，使其他文件可以用require导入
module.exports = router

index

const express = require('express')
const app = express()

const router = require('./apiRouter') // 导入路由模块
app.use('/api', router)    // 将路由模块注册为全局


app.listen(80, () => {
    console.log('http://localhost')
})

编写GET接口

apiRouter.js

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 // 需要响应给客户端的数据
    })
})

// 在这里挂载对应的路由，使其他文件可以用require导入
module.exports = router

编写POST接口

类似上

CORS跨域资源共享问题

刚刚写的GET和POST请求存在一个严重问题：不支持跨域请求

协议、域名、端口号有任何一项不同就会存在跨域问题

主流解决跨域问题方案有两种：

1. CORS（推荐）
2. JSONP（只支持GET请求）

什么是cors？

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

使用cors中间件解决跨域问题

cors是一个express的第三方中间件，可以方便地解决跨域问题

1. 安装：npm i install cors
2. 使用：const cors = require('cors')
3. 调用：app.use(cors())

// 需要在路由前设置
const cors = require('cors')
app.use(cors())

cors响应头

Access-Control-Allow-Origin

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

Access-Control-Allow-Origin: <origin> | *

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

例如，下面的字段值将只允许来自http://yuzoi.com的请求

res.setHeader('Access-Control-Allow-Origin','http://yuzoi.com')

如果指定Access-Control-Allow-Origin字段值为通配符*，则表示允许来自任何域的请求

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

Access-Control-Allow-Headers

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

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

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

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

Access-Control-Allow-Methods

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

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

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

cors请求的分类

客户端在请求CORS接口时，可以将CORS请求分为下面两大类

简单请求

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

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

预检请求

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

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

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

两者的区别

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

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

JSONP接口

概念：浏览器通过