编写接口

1
2
3
4
5
6
7
8
9
10
// app.js
const express = require('express');
const app = express();
const router = require('./router.js');
app.use(express.json());
// '/api'表示访问该路由时需要加上'/api'前缀
app.use('/api' , router);
app.listen(8000, () => {
    console.log('server started');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// router.js
const express = require('express');
const router = express.Router();
// 创建get接口
router.get('/get', (req, res) => {
    res.send({
        status: 200,  // 状态码
        message: 'get success',  // 响应信息
        data: req.query,
    });
})
// 创建post接口
router.post('/post', (req, res) => {
    res.send({
        status: 200,
        message: 'post success',
        data: req.body,
    })
})
module.exports = router;

CORS跨域

​ cors是express的一个第三方中间件

1
2
const cors = require('cors');
app.use(cors());

​ CORS由一系列HTTP响应头组成，这些响应头决定浏览器是否阻止前端JS代码跨域获取资源。

响应头：

  • Access-Control-Allow-Origin: url | * ，”*”表示允许所有域名的请求，只写域名则表示只允许该域名的请求。
  • Access-Control-Allow-Headers: xx ，默认情况下CORS仅支持9个请求头，若发送了额外的请求头则需要通过该响应头声明，‘xx’表示要声明的请求头。
  • Access-Control-Allow-Methods: 'POST, GET, DELETE, PUT' ，默认情况下CORS仅支持GET、POST、HEAD请求，若要使用其他方式则需要使用该响应头声明，星号表示所有方法。

请求方式

  • 简单请求：：请求方式为GET、POST、HEAD三者之一，并且请求头无自定义头部字段且在默认支持的9个请求头范围内。

  • 预检请求：：请求方式为其他请求，或请求头包含自定义头部请求，或向服务器发送了application/json格式的数据。

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

JSONP跨域

​ JSONP：浏览器通过<script>标签的src属性请求服务器的数据，同时服务器返回函数的调用。

  • JSONP不属于Ajax请求，因为没有使用XMLHttpRequest这个对象。
  • 仅支持GET方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const express = require('express');
const app = express();
app.get('/', (req, res) => {
    // 从客户端得到函数的名称
    const fnname = req.query.fnname;
    // 定义要发送到客户端的数据对象
    const data = {
        name: 'jsonp',
        age: 18
    }
    // 拼接出一个函数的调用
    const fn = `${fnname}(${JSON.stringify(data)})`;
    res.send(fn);
})