如何从HTTP客户端获取查询参数并发送到Node.js服务器

你需要先在Node.js服务端暴露一个可接收前端参数的接口，再把前端传递的内容代入到谷歌图书API的请求参数中即可，完整实现流程如下：

1. 改造Node.js服务端代码 #

先安装必要依赖：
npm install express cors request

服务端完整代码：

const express = require('express');
const cors = require('cors');
const request = require('request');
const app = express();
const servicePort = 3000;

// 允许前端跨域调用接口
app.use(cors());
// 解析请求参数
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 自定义图书查询接口，接收前端传参
app.get('/api/book-search', (req, res) => {
  // 从请求中获取前端传入的查询关键词
  const searchKey = req.query.key;
  if (!searchKey) {
    return res.status(400).json({ error: '缺少查询关键词参数' });
  }

  // 替换原有写死的propertiesObject取值
  const propertiesObject = { q: searchKey };
  const googleApiUrl = 'https://www.googleapis.com/books/v1/volumes?key=totallyalegitkey';

  // 调用谷歌图书API
  request({ url: googleApiUrl, qs: propertiesObject }, (err, response, body) => {
    if (err) {
      console.log('接口请求错误：', err);
      return res.status(500).json({ error: '查询失败，请稍后重试' });
    }
    // 将查询结果返回给前端
    res.json(JSON.parse(body));
  });
});

// 启动服务
app.listen(servicePort, () => {
  console.log(`服务已启动，端口号：${servicePort}`);
});

2. 编写HTML客户端代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图书查询</title>
</head>
<body>
  <div class="search-box">
    <input type="text" id="searchInput" placeholder="请输入图书名称">
    <button id="searchBtn">查询</button>
  </div>
  <div id="resultArea"></div>

  <script>
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    const resultArea = document.getElementById('resultArea');

    searchBtn.addEventListener('click', async () => {
      const inputVal = searchInput.value.trim();
      if (!inputVal) {
        alert('请输入查询内容');
        return;
      }
      try {
        // 将用户输入的内容作为参数传给后端接口
        const resp = await fetch(`http://localhost:3000/api/book-search?key=${encodeURIComponent(inputVal)}`);
        const searchResult = await resp.json();
        // 渲染查询结果，可根据需求自行调整展示格式
        resultArea.innerText = JSON.stringify(searchResult, null, 2);
      } catch (e) {
        console.error('请求异常：', e);
        alert('查询失败，请检查服务是否正常运行');
      }
    })
  </script>
</body>
</html>

注意事项 #

• 启动项目时先运行Node.js服务，再打开HTML页面即可正常使用
• 你当前使用的request库已官方停止维护，后续迭代可以替换为axios、node-fetch等仍在维护的请求库
• 谷歌API的密钥放在后端不会泄露给前端，符合安全规范

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