如何使用 express 传递请求 API 响应以做出反应？答案

【问题标题】：how can I pass request API response with express to react?如何使用 express 传递请求 API 响应以做出反应？
【发布时间】：2020-02-03 02:29:41
【问题描述】：

我有以下服务器端设置：

router.get(
    "/auth/google",
    passport.authenticate("google", { scope: ['Profile','https://www.googleapis.com/auth/analytics.readonly'] })
);

router.get(
    "/auth/google/callback",
    passport.authenticate("google", { failureRedirect: "/error", session: false }),
    function(req, res) {
        var token = req.user.token;
        res.redirect("/getData?token=" + token);
    }
);

router.get('/getData', function(req, res) {
    var token = req.query.token;
request('https://www.googleapis.com/analytics/v3/management/accounts?access_token=' + token,  
function (error, response, body) {
          let views = []
   JSON.parse(body).items.forEach(view => {
            views.push({
              name: view.webPropertyId + ' - ' + view.name + ' (' + view.websiteUrl + ')'
            })
          })
res.send(views)
});
})

使用以下客户端组件：

     componentDidMount() {
    fetch('http://localhost:5000/getData',
    {
          method: 'put',
          headers: {'Content-Type': 'application/json'}
      })
      .then(res => { 
        if (!res.ok) {
          throw res;
        }
        return res.json()
      }).then(data => {
        this.setState({loading: false, data});
      }).catch(err => {
        console.error(err);
        this.setState({loading: false, error: true});
      });
  }

我应该如何配置 express 以便我可以获取我的后端并在我的前端传递来自 API 请求的响应？

现在我收到以下错误Failed to load resource: the server responded with a status of 500 (Internal Server Error)

【问题讨论】：

你真的启动了一个监听 5000 端口的网络服务器吗？您的快递服务是否有任何错误？如果您在路由处理程序的顶部放入控制台打印语句，它会被打印出来吗？
是的，所以打开了两个终端。没有错误抛出。我唯一的错误是在 chrome 控制台客户端，这是我在问题中提到的错误：Failed to load resource: the server responded with a status of 500 (Internal Server Error)。并且是的令牌和请求响应在服务器端终端控制台日志中正确打印出来。我在回答你的问题吗？

标签： node.js reactjs express google-analytics-api

【解决方案1】：

您需要通过 JSON 发送信息。那是 res.json(dataObject);，它将被 fetch 调用中的第二个 .then 拾取。您目前正在尝试使用res.send()。

【讨论】：

得到了与其他答案中评论相同的错误。

【解决方案2】：

也许尝试在您的 fetch 参数中将 put 方法切换为 get - 方法：'GET'

【讨论】：

切换到 get 时出现新错误：前端为GET http://localhost:5000/getData net::ERR_CONNECTION_REFUSED 和TypeError: Failed to fetch，后端为Cannot read property 'forEach' of undefined。
这意味着 body.items 没有定义。它需要是一个可迭代的调用 forEach 。身体包含什么？
是的。这里的 body 没有定义 JSON.parse(body).items.forEach(view => { 也没有定义，因为 react 组件在没有传递令牌的情况下获取 /getData' ......这有意义吗？
对，这是有道理的。它期待查询字符串中的令牌，但它没有被传递。我的猜测是您不希望 /getdata 被您的客户直接调用。从您的设置来看，您点击了需要进行身份验证的任何谷歌服务，然后谷歌使用令牌点击您的 /auth/google/callback 路由，然后将客户端重定向到返回视图的 /getData。我不确定您使用的服务的确切规格是什么，但谷歌可能会在文档中描述您需要做什么。
如果我是一个赌徒，我猜你需要你的客户访问的路径是 /auth/google，但我现在只是在猜测。您需要知道 google analytics api 的身份验证政策的人，所以我将其作为标签添加到您的问题中，以便他们参与进来。