axios请求本地node服务器

最新推荐文章于 2025-02-17 09:17:07 发布

杨yang$

最新推荐文章于 2025-02-17 09:17:07 发布

阅读量948

点赞数 1

CC 4.0 BY-SA版权

文章标签：服务器 javascript 前端 node.js

本文链接：https://blog.csdn.net/weixin_42372852/article/details/120897142

本文介绍了如何使用Express框架创建Node.js服务器，并通过axios进行前后端数据交互。首先，通过Express生成器建立项目并设置跨域，然后配置路由。接着，详细讲解了如何在HTML中引入axios，进行GET和POST请求，包括携带参数的方法，以及请求结果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.使用express创建node服务器

expres是node的框架。(express中文网)

1.快速创建一个项目，先安装Express 应用程序生成器。

npm install -g express-generator

然后使用命令快速生成。

express

最后在生成文件的目录下安装依赖。

npm install

2.使用中间件进行跨域设置。

app.all('*',function (req,res,next) {
  console.log('允许跨域访问')
  res.header('Access-Control-Allow-Origin',req.headers.origin)
  res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE")
  res.header('Access-Control-Allow-Headers','*')
  next()
})

3.进行路由设置。

get请求：query解析get传递的参数

router.get('/user', function (req, res) {
  console.log(typeof Number(req.query.id))
  switch (Number(req.query.id)) {
    case 1:
      res.json({
        'id': '1',
        'name': 'yang',
        'age': '18'
      })
      break;
    case 2:
      res.json({
        'id': '2',
        'name': 'yu',
        'age': '18'
      })
      break;
    case 3:
      res.json({
        'id': '3',
        'name': 'wang',
        'age': '18'
      })
      break;
  }
})

post请求：body解析post提交的请求参数

router.post('/user', function (req, res) {
  console.log(req.route.path);
  console.log(req.body)
  res.json({
    user: req.body.user,
    pass: req.body.pass
  })
})

4.运行node服务器

node ./bin/www

二.使用axios请求数据

1.创建一个html文件，引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.配置axios请求

function request(config) {
	const instance = axios.create({
		baseURL: 'http://localhost:3000',
		timeout: 2000,
		});
		return instance(config)
}

3.get请求服务器数据，默认的请求方法为get

携带参数传递使用params。

request({
	url: '/user',
		params: {
				id: 3
			}
	}).then((res) => {
	console.log(res)
}).catch((err) => {});

get请求结果：
请添加图片描述

3. post请求服务器数据，

携带参数传递使用data

request({
         method: 'POST',
         url: '/user',
         data: {
                user: 'yang',
                pass: '123456'
            }
        }).then((response) => {
            console.log(response)
        }).catch((err) => {
            console.log(err)
        });