客户端JavaScript如何调用Express后端接口获取数据库返回数据

1. 先修复Express服务端的跨域问题（必做，否则浏览器会拦截请求） #

你现在的服务端没有配置跨域资源共享，本地客户端直接调用会报跨域错误，有两种快速配置方式：

方式1：使用cors中间件（推荐） #

先安装cors包：
npm install cors
然后在你的Express代码里引入并使用：

var mysql = require('mysql2');
var express = require('express');
var cors = require('cors'); // 引入cors

var app = express();
app.use(cors()); // 全局开启跨域支持
var PORT = 3000;

// 后面的原有路由、监听逻辑保持不变

方式2：手动设置响应头（不想装依赖可以用） #

在你的app.get路由回调最开始添加跨域头配置：

app.get('/getDataFromDatabase', function(req, res) {
  // 新增以下3行设置跨域头
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

  console.log("Called")
  // 原有数据库查询、返回逻辑保持不变
})

2. 客户端JavaScript调用接口的实现 #

方式1：用原生fetch API（现代浏览器通用，无需额外依赖） #

// 如果客户端和服务端不同域名/端口，要写完整服务端地址，比如 http://localhost:3000/getDataFromDatabase
fetch('http://localhost:3000/getDataFromDatabase')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求出错，状态码：' + response.status)
    }
    return response.json() // 将返回结果转为JSON格式
  })
  .then(data => {
    // 此处的data就是你从数据库查询到的cases表数据，可直接使用
    console.log('获取到的数据库数据：', data)
    // 举个使用示例：把数据渲染到页面列表
    // const list = document.getElementById('case-list')
    // data.forEach(item => {
    //   const li = document.createElement('li')
    //   li.textContent = `案例ID：${item.id}，案例内容：${item.content}`
    //   list.appendChild(li)
    // })
  })
  .catch(error => {
    console.error('请求失败：', error)
  })

如果习惯用async/await语法可以写成更简洁的形式：

async function getCaseData() {
  try {
    const response = await fetch('http://localhost:3000/getDataFromDatabase')
    if (!response.ok) throw new Error('请求失败')
    const data = await response.json()
    console.log('获取到的数据：', data)
    // 此处写数据使用逻辑
    return data
  } catch (err) {
    console.error('请求出错：', err)
  }
}

// 调用函数触发请求
getCaseData()

方式2：用axios（项目常用请求库，需先引入axios） #

如果你的项目已经引入了axios，调用逻辑更简洁：

axios.get('http://localhost:3000/getDataFromDatabase')
  .then(res => {
    const data = res.data
    console.log('获取到的数据：', data)
    // 后续使用逻辑
  })
  .catch(err => {
    console.error('请求错误：', err)
  })

补充优化建议 #

你当前的服务端代码每次请求都会新建数据库连接，建议把数据库连接抽成公共实例复用，避免频繁创建连接带来的性能损耗。

内容的提问来源于stack exchange，提问作者Godzy