前端AJAX怎么调用后端API_前端AJAX请求与Node后端接口对接完整流程-js教程-PHP中文网

前端AJAX怎么调用后端API_前端AJAX请求与Node后端接口对接完整流程

絕刀狂花

发布： 2025-11-14 23:51:33

原创

716人浏览过

首先确保前后端接口路径、数据格式一致，前端使用fetch发送POST请求携带JSON数据，Node后端通过Express接收并解析请求体，需配置cors中间件解决跨域问题，后端验证登录信息后返回对应结果，联调时注意服务端口、请求头类型及网络状态。

前端ajax怎么调用后端api_前端ajax请求与node后端接口对接完整流程

AJAX调用后端API是前端开发中的核心技能之一。实现前端通过AJAX请求与Node后端接口对接，关键在于前后端通信的协议一致、接口路径正确、数据格式匹配以及跨域问题处理。下面详细介绍完整流程。

前端发送AJAX请求

使用原生JavaScript或jQuery都可以发起AJAX请求。这里以原生fetch为例，更现代且无需额外库。

假设我们要向Node后端提交用户登录信息：

请求地址：/api/login
请求方式：POST
数据格式：JSON

前端代码示例：

立即学习“前端免费学习笔记（深入）”；

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'zhangsan',
    password: '123456'
  })
})
.then(response => response.json())
.then(data => {
  console.log('登录成功:', data);
})
.catch(error => {
  console.error('请求失败:', error);
});

登录后复制

Node后端接收请求（Express框架）

确保Node服务使用Express并配置了必要的中间件来解析JSON和处理跨域。

安装依赖：

npm install express cors body-parser

登录后复制

创建服务器并定义路由：

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

// 启用CORS，允许前端访问
app.use(cors());
// 解析JSON请求体
app.use(bodyParser.json());

// 登录接口
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  // 简单验证逻辑
  if (username === 'zhangsan' && password === '123456') {
    res.json({ code: 200, message: '登录成功', data: { token: 'abc123' } });
  } else {
    res.status(401).json({ code: 401, message: '用户名或密码错误' });
  }
});

// 启动服务
app.listen(3000, () => {
  console.log('Node服务运行在 http://localhost:3000');
});

登录后复制

解决跨域问题

前端页面通常运行在http://localhost:5173（如Vite项目），而后端在http://localhost:3000，属于不同源，浏览器会阻止请求。

解决方案已在上面体现：使用cors中间件自动设置响应头，允许跨域请求。

如果不使用cors，也可以手动设置头信息：

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

登录后复制

注意：*适用于开发环境，生产环境建议指定具体域名。