目录

1. 创建基本的服务器

2. 创建 API 路由模块

3. 编写 GET 接口

4. 编写 POST 接口

5. CORS 跨域资源共享

5.1 接口的跨域问题

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

5.3 什么是 CORS

5.4 CORS 的注意事项

5.5 CORS 响应头部 - Access-Control-Allow-Origin

5.6 CORS 响应头部 - Access-Control-Allow-Headers

5.7 CORS 响应头部 - Access-Control-Allow-Methods

5.8 CORS请求的分类

5.9 简单请求

5.10 预检请求

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

6. JSONP 接口

6.1 回顾 JSONP 的概念与特点

6.2 创建 JSONP 接口的注意事项

6.3 实现 JSONP 接口的步骤

6.4 实现 JSONP 接口的具体代码

6.5 在网页中使用 jQuery 发起 JSONP 请求

---

1. 创建基本的服务器

2. 创建 API 路由模块

3. 编写 GET 接口

4. 编写 POST 接口

• 如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))

5. CORS 跨域资源共享

5.1 接口的跨域问题

• ① CORS（主流的解决方案，推荐使用）
• ② JSONP（有缺陷的解决方案：只支持 GET 请求）

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

• ① 运行 npm install cors 安装中间件
• ② 使用 const cors = require('cors') 导入中间件
• ③ 在路由之前调用 app.use(cors()) 配置中间件

router.js模块：

// 路由模块
const express = require('express')
const apiRouter = express.Router()

// 在这里挂载对应的路由
// 定义 get 接口
apiRouter.get('/get', (req, res) => {
  // 通过 req.query 获取客户端通过查询字符串，发送到服务器的数据
  const query = req.query
  // 调用 res.send() 方法，向客户端响应处理的结果
  res.send({
    status: 0, // 0 表示处理成功，1 表示处理失败
    msg: 'GET请求成功', //状态的描述
    data: query // 需要响应给客户端的数据
  })
})

// 定义 post 接口
apiRouter.post('/post', (req, res) => {
  // 1. 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
  const body = req.body
  // 2. 调用 res.send() 方法，向客户端响应结果
  res.send({
    status: 0,
    msg: 'POST请求成功',
    data: body
  })
})

// 定义 DELETE 接口
apiRouter.delete('/delete', (req, res) => {
  res.send({
    status: 0,
    msg: 'DELETE请求成功'
  })
})

// 导出路由
module.exports = apiRouter

app.js模块：

// 导入 express 模块
const express = require('express')
// 导入路由
const apiRouter = require('./21-router.js')

// 创建 express 服务器实例
const app = express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

// 一定要在路由之前，配置 cors 这个中间件，从而解决接口跨域问题
const cors = require('cors')
app.use(cors())

// 注册路由
app.use('/api', apiRouter)

// 调用 app.listen() 方法，指定端口号并且启动服务器
app.listen(80, () => {
  console.log('express server is running at http://127.0.0.1')
})

5.3 什么是 CORS

• CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。

• 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。

5.4 CORS 的注意事项

• ① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
• ② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。

5.5 CORS 响应头部 - Access-Control-Allow-Origin