Node.js+Express对接IGDB API：如何传递搜索参数至后端接口

没问题，这其实不难，咱们分两步来改——先调整后端接口支持动态搜索参数，再修改前端把用户输入的游戏名传过去：

原来的接口硬编码了"halo"，咱们要改成从前端接收搜索词，这里用URL查询参数（也就是?search=xxx的形式）最适合搜索场景。修改后的代码如下：

app.get('/test', (req, res) => {
  // 保留CORS头，或者后面可以换成cors中间件更省心
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, Content-Type, Accept");

  // 从URL查询参数里获取搜索词，同时处理特殊字符防止IGDB查询语法出错
  const rawSearchTerm = req.query.search;
  if (!rawSearchTerm) {
    return res.status(400).send({ error: '请提供搜索关键词' });
  }
  // 转义双引号，避免破坏IGDB的查询语法（比如用户搜"Final Fantasy"会导致语句出错）
  const searchTerm = rawSearchTerm.replace(/"/g, '\\"');

  fetch("https://api-v3.igdb.com/games", {
    headers: {
      "user-key": "MY_KEY", // 记得换成你的实际密钥
      Accept: "application/json"
    },
    method: "POST",
    // 把硬编码的"halo"换成动态的searchTerm
    body: `fields name; search "${searchTerm}"; where version_parent = null;`
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`IGDB请求失败: ${response.status}`);
    }
    return response.json();
  })
  .then((response) => {
    res.send(response);
  })
  .catch((err) => {
    console.error(err);
    // 给前端返回错误响应，而不是只在控制台打印
    res.status(500).send({ error: '获取游戏数据失败，请稍后重试' });
  });
});

关键改动说明： #

• 用req.query.search获取前端传来的搜索关键词
• 增加参数校验：如果没有传搜索词，返回400错误提示
• 转义搜索词里的双引号，避免破坏IGDB的查询语法
• 优化错误处理：IGDB请求失败时给前端返回明确的错误响应

首先你需要在HTML里加一个输入框（假设id是gameSearch），然后修改JS代码，获取输入框的值并传递给后端：

先补全HTML部分（如果还没加）： #

<input type="text" id="gameSearch" placeholder="输入游戏名称，比如Halo">
<button id="test">搜索游戏</button>
<!-- 加个区域展示搜索结果 -->
<div id="gameResults"></div>

修改前端JS代码： #

const testBtn = document.getElementById('test');
const gameSearchInput = document.getElementById('gameSearch');
const gameResults = document.getElementById('gameResults');

testBtn.addEventListener('click', () => {
  // 获取输入框的值，去除前后空格
  const searchValue = gameSearchInput.value.trim();
  
  // 校验输入：如果为空，提示用户
  if (!searchValue) {
    alert('请输入要搜索的游戏名称');
    return;
  }

  // 把搜索词作为查询参数拼到URL里，用encodeURIComponent处理特殊字符（比如空格、中文）
  fetch(`http://localhost:3000/test?search=${encodeURIComponent(searchValue)}`)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`后端请求失败: ${response.status}`);
    }
    return response.json();
  })
  .then((response) => {
    // 把结果展示到页面上
    if (response.length === 0) {
      gameResults.innerHTML = '<p>没有找到匹配的游戏</p>';
      return;
    }
    const resultList = response.map(game => `<li>${game.name}</li>`).join('');
    gameResults.innerHTML = `<ul>${resultList}</ul>`;
  })
  .catch((err) => {
    console.error(err);
    gameResults.innerHTML = '<p>搜索失败，请稍后重试</p>';
  });
});

关键改动说明： #

• 获取输入框内容并做空值校验
• 用encodeURIComponent处理搜索词，确保特殊字符（比如空格、中文）能正确传递
• 补全了结果展示逻辑，让用户能看到搜索到的游戏列表

1. 用CORS中间件替代手动加头：手动写CORS头容易遗漏，推荐安装cors包：

   npm install cors
   

   然后在Express里使用：

   const cors = require('cors');
   app.use(cors()); // 这样就不用每个接口手动加头了
   

2. 扩展IGDB返回字段：可以修改fields部分获取更多游戏信息，比如fields name, cover.url, rating;就能拿到封面和评分。
3. 防抖处理：如果用户输入很快，可以加个防抖函数，避免频繁发送请求。

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