[JavaScript知识库]09、基于Express写接口及跨域问题解决

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','请求方法')
//*表示允许所有的请求方式