在express路由get请求中使用node-fetch调用GitHub接口返回异常如何解决

问题原因 #

node-fetch发起请求后返回的是Response类实例，而非接口实际返回的JSON数据。你打印的日志也能看到，GitHub返回的仓库数据存储在Response实例内部的Body流中，没有经过解析直接序列化返回给前端，只会返回Response实例的顶层公共属性，也就是你看到的size、timeout字段。

解决方法 #

你需要调用Response实例的异步方法.json()，将内部的流数据解析为可序列化的JS对象后再返回，修正后的代码如下：

import fetch from 'node-fetch'

router.get('/github/:username', async (req, res) => {
  try {
    // 建议直接改成https，避免301跳转损耗
    const uri = `https://api.github.com/users/${req.params.username}/repos?per_page=5&sort=created:asc&client_id=${process.env.GITHUB_CLIENT_ID}&client_secret=${process.env.GITHUB_CLIENT_SECRET}`;

    const response = await fetch(uri, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    });
    // 新增：先判断请求是否成功，避免把GitHub的错误响应直接返回给前端
    if (!response.ok) {
      return res.status(response.status).send(`GitHub接口请求失败：${response.statusText}`)
    }
    // 新增：解析响应体为JSON数据
    const repoData = await response.json()
    // 返回解析后的数据，而非原始Response对象
    return res.json(repoData);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('server error');
  }
});

另外你原来配置的mode: 'cors'是前端fetch的参数，服务端调用node-fetch时这个参数没有实际作用，可以删掉。

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