
const express = require('express');
const router = express.Router();
// 挂载对应路由模块
router.get('/get', (req, res) => {
    const query = req.query;
    // 调用send方法向客户端响应处理结果
    res.send({
        status: 0, //0=成功，1=失败
        masg: 'Get请求成功', // 状态描述
        data: query // 响应给客户端
    })
})
module.exports = router;

●将封装好的模块进行导入


const express = require('express')
const app = express()
// 导入路由模块
const router = require('./02.apiRouter')
// 挂载路由模块到app上面
app.use('/api', router);
 
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');
})

测试get接口


$('#btnGET').on('click', function () {
                // 测试GET接口
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.2/api/get',
                    data: { name: 'ss', age: 12 },
                    success: function (res) {
                        console.log(res);
                    },
                })
            })

2.post接口


router.post('/post', (req, res) => {
    const body = req.body
    // 调用send方法向客户端响应处理结果
    res.send({
        status: 0,
        msg: 'POST请求成功！',
        data: 'body'
    })
})

测试post接口


            $('#btnPOST').on('click', function () {
                // 测试POST接口
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.2/api/get',
                    data: { name: 'ss', age: 12 },
                    success: function (res) {
                        console.log(res);
                    },
                })
            })

不要忘记配置一下这个中间件在另一个文件里

2.跨域问题

GET和POST接口，存在一个很严重的问题:不支持跨域请求。

解决接口跨域问题的方案主要有两种：①CORS (推荐使用，都支持) ②JSONP (有缺陷，只支持GET请求)

1.CROS是什么

CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头, 就可以解除浏览器端的跨域访问限制。

2.使用CROS解决跨域问题

第一步:npm i cors 安装cors中间件

第二步：const cors require('cors') 导入中间件

第三步：调用app.use(cors()) 配置中间件（在路由之前调用）

3.CORS请求的分类

客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类

①简单请求 ②预检请求

简单请求:

①请求方式: GET. POST、 HEAD三者之一 ②HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept. Accept-Language、 Content-Language、 DPR、 Downlink、Save-Data、 Viewport-Width、 Width 、Content-Type (只有三个值application/x-www-form- urlencoded、multipart/form-data、 text/plain)

预检请求:

①请求方式为 GET、POST、HEAD 之外的请求Method类型 ②请求头中包含自定义头部字段 ③向服务器发送了application/jison 格式的数据

特点：

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

4.编写jsonp的接口

如果已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。

配置jsonp接口，由于jsonp没有在router中所以得加上‘/api’


// jsonp接口必须配置到cors之前
app.get('/api/jsonp', (req, res) => {
    // 定义jsonp接口
    // 获得函数名
    const funcName = req.query.callback;
    // 定义要发送到客户端的数据对象
    const data = { name: 'qw', age: 12 }
    // 拼接一个函数调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    // 把所拼接的字符串响应给客户端
    res.send(scriptStr)
})

2.绑定事件按钮


// 为jsonp事件绑定按钮
            $(`#btnJSONP`).on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1',
                    dataType: 'jsopn',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/603479

推荐阅读

相关标签