Express的接口

news2025/1/21 7:46:00

接口的跨域问题域问题

request接口代码

const express = require('express')
const app = express()
//在路由之前，配置cors中间件，解决接口跨域问题
const cors = require('cors')
app.use(cors())

const router = require('./apiRouter')

app.use('/api',router)


app.post('/',(req,res) => {
    console.log(req.query)
    res.send('ok')
})

app.listen('80',function() {
    console.log('http://127.0.0.1')
})

router代码

const express = require('express')

// 定义路由对象
const router = express.Router()

router.use(express.urlencoded({extended:false}))

router.use(express.json())

// 获取客户端查询字符串，发送到服务器的数据
router.get('/get',(req,res) => {
    const query = req.query
    //调用 res.send()方法，吧数据响应给客户端
    res.send( {
        status:0, //状态，0 表示成功；1 表示失败
        msg:'GET请求成功', //状态描述
        data:query
    })
    
})

router.post('/post',(req,res) => {
    const body = req.body

    res.send({
        status:0, //
        msg:'POST请求成功',
        data:body
    })
})

module.exports = router

HTML页面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>

    <script>
        $(function(){
            //1、测试GET接口
            $('#btnGET').on('click',function() {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1/api/get',
                    data: {name: 'zs'},
                    success:function(res) {
                       console.log(res)
                    },
                })
            })
             //2、测试POST接口
             $('#btnPOST').on('click',function() {
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1/api/post',
                    data: {bookname: '水浒传'},
                    success:function(res) {
                        console.log(res)
                    },
                })
            })
        })
    </script>
</body>
</html>