1、创建本地服务器
【代码示例】:
const express = require('express')
const app = express()
app.listen(80, () => {
console.log('express running at http://127.0.0.1');
})
2、创建api路由模块
【代码示例】
// 导入express
const express = require('express')
// 创建路由实例对象
const apiRouter = express.Router();
// 开始挂载路由
apiRouter.get('/get', (req, res) => {
// 获取客户端的查询字符串,发送到服务器的数据
const query = req.query
// 响应数据给客户端
res.send({
status: 0,
msg: 'GET请求成功!!',
data: query
})
})
apiRouter.post('/post', (req, res) => {
// 获取客户端的请求体,发送到服务器的数据
const body = req.body
// 响应数给客户端
res.send({
status: 0,
msg: 'POST请求成功!!',
data: body
})
})
module.exports = apiRouter
3、使用api路由模块
【代码示例】:
// 导入express
const express = require('express')
// 导入api路由模块
const apiRouter = require('./02、创建api路由模块')
// 创建web服务器
const app = express()
// 配置数据解析中间件 为url-encoded格式
app.use(express.urlencoded({
extended: false
}))
// 注册路由 并添加统一的前缀
app.use('/api', apiRouter)
// 启动服务器
app.listen(80, () => {
console.log('express running at http://127.0.0.1');
})
4、CORS跨域资源共享
1、接口的跨域问题
以上所书写的api路由模块中的接口存在很严重的问题,是不支持跨域请求的
【解决方式】:
- CORS(主流的解决方案)
- JSONP 有缺陷的解决方案仅支持get请求
2、使用CORS中间件解决跨域问题
【使用步骤】:
- 运行 npm install cors 安装中间件
- 使用 const cors = require(‘cors’) 导入中间件
- 在路由之前调用 app.use(cors()) 配置中间件
【代码优化:解决跨域问题】:
// 导入express
const express = require('express')
// 导入api路由模块
const apiRouter = require('./02、创建api路由模块')
// 导入cors解决跨域问题
const cors = require('cors')
// 创建web服务器
const app = express()
// 配置cors中间件,解决跨域问题
app.use(cors())
// 配置数据解析中间件 为url-encoded格式
app.use(express.urlencoded({
extended: false
}))
// 注册路由 并添加统一的前缀
app.use('/api', apiRouter)
// 启动服务器
app.listen(80, () => {
console.log('express running at http://127.0.0.1');
})
3、什么是 CORS
【解释】: 由一系列 HTTP 响应头组成,这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。
【产生跨域原因】: 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。
【解决方法】: 接口服务器配置了 CORS 相关的 HTTP 响应头,就可以解除浏览器端的跨域访问限制。
【注意事项】:
- CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。
- CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启CORS 的服务端接口
4、CORS 响应头部 - Access-Control-Allow-Origin
【语法】:
res.setHeader('Access-Control-Allow-Origin','允许访问的外域url')
5、CORS 响应头部 - Access-Control-Allow–Headers
【解释】: 默认情况下,CORS 仅支持客户端向服务器发送如下的 9 个请求头。如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-Allow-Headers 对额外的请求头进行声明,否则这次请求会失败!
【语法】:
res.setHeader('Access-Control-Allow--Headers','请求头')
6、CORS 响应头部 - Access-Control-Allow-Methods
【解释】: 默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。
【语法】:
res.setHeader('Access-Control-Allow-Methods','请求方法')
//*表示允许所有的请求方式