node.js 创建接口 router路由，解决跨域

最新推荐文章于 2024-03-30 09:29:15 发布

蔣氏

最新推荐文章于 2024-03-30 09:29:15 发布

阅读量1.4k

点赞数

文章标签： node.js npm javascript

本文链接：https://blog.csdn.net/weixin_51794873/article/details/124513107

版权

express 基于node http基础开发的强大的服务器包

npm i express@4.17.1

cors 中间件解决跨域

组测中间件 npm install cors

1.express写接口：

代码如下 index.js


const express = require("express")
const router = express.Router()

router.get('/user', (req, res) => {
  console.log(req.query);
  //1.获取get请求的参数值（req.query）
  // console.log(req.body);
  res.send({
    status: 0,
    msg: 'get 请求成功',
    data: req.query
  });
})
router.post('/use', (req, res) => {
  // console.log(req.query);
  //2.获取post请求的参数值(req.body)
  console.log(req.body);


  res.send({
    status: 0,
    msg: 'post 请求成功',
    data: req.body
  });
})

module.exports = router

//1.获取get请求的参数值（req.query）

//2.获取post请求的参数值(req.body)

//3.获取url路径（req.params）

//router.get('/test/:urlname', function (req, res,next) {


//4.获取上传文件信息

//req.files 需要第三方库,比如 multer

调用接口，启动服务器：

代码如下

const express = require("express")
const app = express()

//解决接口跨域的问题  在路由之前导入 

//cors 中间件解决跨域
//JSONP (有缺陷，只支持get 请求跨域)

//1. 组测中间件 npm install cors
//2.使用 const cors = require("cors")
 const cors = require("cors")
//3.在路由之前调用app.use(cors())
 app.use(cors())


//-----------
/* 
设置请求头
Access-Control-Allow-Origin 
res.setHeader() 在请求中的res 写入
res.setHeader('Access-Control-Allow-Origin', '*') * 代表允许来至任何域的请求

默认情况下，响应请求头不能超过 以下9个

*/

//app.use(express.json())挂载之后 ，可以解析客户端发送过来的json 数据
app.use(express.json())
//解决 url-encodedg格式数据
//app.use(express.urlencoded())挂载之后 ，可以解析客户端发送过来的url-encodedg 数据
app.use(express.urlencoded({ extended: false }))

const route = require('./12express写接口')

app.use('/api', route)

app.listen(8082, () => {
  console.log("11111111111");
})

注意：

启动服务器：

1.在所写的文件下面开器终端或者 cmd

2. 启动指令 node 文件名 ------------------------注意：js扩展名结尾

测试：前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <button id="get">get

    </button>
    <button id="post">post

    </button>
    <script>

        $(
            function () {
                $('#get').on('click', function () {
                    $.ajax({
                        type: 'GET',
                        url: 'http://127.0.0.1:8082/api/user',
                        data: { name: 'sz', age: '28' },
                        success: function (res) {
                            console.log(res);
                        }
                    })
                })

                $('#post').on('click', function () {
                    $.ajax({
                        type: 'POST',
                        url: 'http://127.0.0.1:8082/api/use',
                        data: { name: 'post', age: '12' },
                        success: function (res) {
                            console.log(res);
                        }
                    })
                })
            }
        )
    </script>
</body>

</html>

打印结果

如有问题请留言！！！！！！！！！！！！！！

蔣氏

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
node.js 创建接口 router路由，解决跨域

express 基于node http基础开发的强大的服务器包npm i express@4.17.1cors 中间件解决跨域组测中间件 npm install cors1.express写接口：代码如下 index.jsconst express = require("express")const router = express.Router()router.get('/user', (req, res) => { console.log(req.query.
复制链接

扫一扫