时间戳

首页 > 解决方案 > 后端 API 获取，而不是 React

node.js - 后端 API 获取，而不是 React

问题描述

我是编程新手，我创建了一个天气应用程序来练习 React。我还创建了一个节点服务器和一个主页（组合）。所以我的树看起来像这样：

项目

-portfolio（带有简单 html 文件的主页）

-天气（反应）

-server.js

在天气应用程序中，我对 openweathermap.org 进行了几次 API 提取。但我注意到，当我发布这个应用程序时，我的 API 密钥是可见的，避免这种情况的最佳方法是在 Node 后端进行调用。如何将数据从天气应用程序移动到 server.js，反之亦然？例如，用户将在天气应用程序中输入邮政编码。此邮政编码在 url 中用于获取数据。我如何使邮政编码显示在服务器中？然后我是否只执行服务器中的所有提取？

我的天气应用程序代码可以在上一个问题中找到。我确实做了建议的修改，现在有两个单独的 useEffect。React - API fetches - 第二次获取使用来自第一次获取的数据？

谢谢您的帮助。

服务器.js

const express = require("express")
const app = express()
const path = require("path")
const port = process.env.PORT || 5000

app.use("/weather",express.static(path.join("weather/build")))

app.use("/",express.static(path.join("portfolio")))

app.listen(port, () => console.log("Working"))

标签： node.js

解决方案

如果您在前端使用 API 密钥，它将始终暴露给检查您的网络请求的任何人。如果你坚持在前端请求中使用 API 密钥，你应该至少在你的 React 前端使用 .env 模块并在那里添加你的 API 密钥，确保你将你的 .env 提交给你的 .gitignore，这样它就不会被提交给你的源代码。

const port = process.env.PORT || 5000

我假设您已经知道如何设置它，因为您在这里使用它。

或者

您可以使用您的 API 端点反向代理您的请求，将您的 API 密钥存储在您的 .env 中，并让您的路由发出 API 请求openweathermap.org——成功地从网络分析中隐藏您的 API 密钥：

  • 反应天气应用程序=>YOUR_API_ENDPOINT

  • YOUR_API_ENDPOINT=> openweathermap.org

  • Parse data=>Send response到天气应用程序

如何将数据从天气应用程序移动到 server.js，反之亦然？例如，用户将在天气应用程序中输入邮政编码。此邮政编码在 url 中用于获取数据。我如何使邮政编码显示在服务器中？然后我是否只执行服务器中的所有提取？

将其作为请求的 url 中的参数传递，并让您的后端从 url 中解析出参数。

天气应用：

axios.get(`${YOUR_API_ENDPOINT}/zip/${DYNAMIC_ZIP_CODE_DATA}`) //basic example

节点

app.get("/zip/:zip", (req, res) => {
  console.log('params: ', req.params.zip)
  const zip = req.params.zip;

  //make the API request here and pass in the zip
  res.send(req.params)
})

推荐阅读