从服务器中的公共 API 获取数据并发送到客户端

Question

这是另一个可能很简单的问题，但仍然让我很困惑。我非常熟悉在前端进行 api 调用并显示数据，但是我想保证安全，所以我试图将 api 调用移动到后端服务器文件。我似乎在显示来自后端的 API 调用发送到前端的信息时遇到了一些困难。实际上，调用服务器的客户端功能在控制台中显示为挂起。数据正在控制台中登录，并且工作正常，但是如何在前端检索该数据？有问题的函数是 loadProfile 函数。

服务器文件；

const express = require('express');
const router = express.Router();
require('dotenv').config();
const axios = require('axios');

router.get('/profile', async (req, res) => {
  try {
    const data = await axios.get(
      `https://finnhub.io/api/v1/news?category=general&token=${process.env.API_KEY}`
    );

    console.log(data);
  } catch (error) {
    console.log(error);
  }
});

module.exports = router;

客户端：

import React, {useEffect, useState} from 'react';
import axios from 'axios';
import NewsCard from '../News/NewsCard';
import Post from '../Post/Post';
import PostForm from '../PostForm/PostForm';
import './Profile.css';

const Profile = () => {
  const [items, setItems] = useState([]);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    loadProfile();
    getPosts();
  }, []);

  const loadProfile = async () => {
    const res = await axios.get('http://localhost:4000/profile');
    console.log(res.data);
    setItems(res.data);
  };

  const getPosts = async () => {
    try {
      const res = await axios.get('http://localhost:4000/post');
      setPosts(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <section className="profileBody">
      <div className="news">
        <NewsCard key={posts.idPosts} items={items} />
      </div>

      <div className="postSection">
        <PostForm getPosts={getPosts} />
        <h1>
          Latest Posts{' '}
          <span onClick={getPosts}>
            <i class="fas fa-redo"> </i>
          </span>
        </h1>

        <div>
          <Post key={posts.id} posts={posts} />
        </div>
      </div>
      <div className="prices">
        <h3>hewiorhewioajroiewja</h3>
      </div>
    </section>
  );
};
export default Profile;

Answer 1

您似乎没有从后端 return res.json(data); 返回响应：

router.get('/profile', async (req, res) => {
  try {
    const data = await axios.get(
      `https://finnhub.io/api/v1/news?category=general&token=${process.env.API_KEY}`
    );

    console.log(data);
    return res.json(data); // missing return
  } catch (error) {
    console.log(error);
  }
});