在Reactjs中向Nodejs后端发送数据以进行API调用

Question

我正在尝试从Reactjs向Nodejs服务器(托管在Firebase上(发送数据，以从API调用中检索数据。

当API url被硬编码时，它就工作了，所以问题应该是将数据从React发送到Node。我目前正试图让它只返回一个请求，但一旦我能够做到这一点，我将尝试获取多个请求。

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

我的React代码如下：

class Table extends Component {
constructor (props)
{
super(props);
this.state = {
favorites: ['APPL'],
stocks: []
};
}
componentDidMount() {
// http is adjusted for stackoverflow
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-endpoint，并在该方法中发送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库。

Answer 2

在我的问题中，我试图使用Firebase函数来处理到外部API的链接，并在前端使用来自该API的数据。

在Stackoverflow的帮助下，我发现这可能不是一个理想的方法。我基本上是想在前端和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);
});
})
}

Answer 3

fetch需要导入。

const fetch＝import("node fetch"(；

错误[ERR_REQUIRE_ESM]：ES模块的REQUIRE((。。。不支持