将数据发送到 Reactjs 中的 Nodejs 后端以进行 API 调用

Question

我正在尝试将数据从 Reactjs 发送到我的 Nodejs 服务器（托管在 Firebase 上）以从 API 调用中检索数据。

它在 API url 被硬编码时起作用，所以问题应该在于将数据从 React 发送到 Node。我目前正在尝试仅 return 一个请求，但一旦我能够做到这一点，我将尝试获取多个请求。

结果是用响应填充股票状态。

我的 React 代码如下所示：

class Table extends Component {
  constructor (props)
  {
     super(props);
      this.state = {
         favorites: ['APPL'],
         stocks: []
     };
 }

   componentDidMount() {
   // http is adjusted for Whosebug
    fetch('http://localhost:5001/', { 
      // new part:
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        favorites: this.state.favorites})
      // old part - worked before i tried to send data to the backend:
    })
    .then((response) => response.json())
    .then(stockList => {
        this.setState({ stocks: stockList });
            console.log(stockList);
    });
}

节点代码：

const functions = require("firebase-functions");
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");

    const app = express();
    app.use(cors({origin: true}));
    
    app.get('/', async (request, response) => {
      // new line that was ment to catch the data from frontend.
      const favorites = request.body.favorites
      // web and key is the rest of the API call.
      const url = web+favorites+key;
      const fetchResponse = await fetch(url);
      const symbol = await fetchResponse.json();
      response.json(symbol);
    });

Answer 1

为了从前端获取数据，您需要在 Node 服务器中创建一个 post 端点，并在该方法中发送 GET 请求。

const functions = require("firebase-functions");
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");

    const app = express();
    app.use(cors({origin: true}));
    
    app.post('/', (req, res) => {
        // here is how you get the POST data from the body
        console.log(req.body.favorites)
        
        // send the data from the POST request to the API through a GET request here

    })

现在您需要在我放置评论的地方发出 GET 请求，您可以使用更简单的 https node.js library。

Answer 2

在我的问题中，我正在尝试使用 Firebase 函数将 link 处理到外部 API 并在我的前端使用来自该 API 的数据。

经过一些思考和 Whosebug 的帮助，我发现这可能不是一个理想的方法。我基本上是想在前端和 API 之间添加一个层，但这不是必需的，因为可以在 React 中直接到达 API。这将从 Firebase 中删除该功能，这意味着更少的步骤、更少的代码和更少的费用。

因此对于 state.favorites 中的每个实例，相关数据都从 API 中提取并存储在 state.stocks 中。

这段代码成功了：

class Table extends Component {
  constructor (props)
  {
     super(props);
      this.state = {
         favorites: ['aapl', 'arvl'],
         stocks: []
     };
 }

      componentDidMount() {
        this.state.favorites.map((favorites, index) => {
        fetch(`API_website${favorites}/(API_token`)
            .then((response) => response.json())
            .then(stockList => {
               this.setState({ stocks: stockList });
                   console.log(stockList);
           });
        })
      }

将数据发送到 Reactjs 中的 Nodejs 后端以进行 API 调用

Sending data to Nodejs backend in Reactjs for API call

https

node.js

reactjs

google-cloud-functions