使用 express.router(); 使用 api 密钥向第三方 API 发出 get 请求

Question

我正在构建一个反应应用程序，在其中我正在从第三方站点检索数据，这需要我使用"X-Auth-Token"在标头中发送 API 密钥。

目前，我正在使用客户端js文件中的fetch((api发出此请求。 我知道这是不好的做法，我应该隐藏我的 api 密钥，所以这就是我正在尝试做的，但我发现很难理解所有组件如何在这个难题中组合在一起......

我遵循了一个教程，现在有一个在端口 3000 上本地侦听的 create-react-app 项目，以及一个在端口 9000 上本地侦听的快速服务器(使用 express.router(((。

我想从快递服务器向第三方发出 api 请求，然后将其发送到前端。

1. 使用 express.router((，我将如何向包含我的 API 密钥的第三方发出请求，然后将其发送到前端？
2. 当我最终托管这个项目(我在 Heroku 上托管(时，而不是前端向 Port9000 发出获取请求以从快速服务器请求中检索数据，它应该侦听什么 URL？ - 我认为我对这部分缺乏理解。

Answer 1

你说到点子上了，你应该像中间人一样将数据检索到你的前端。当然有几个实现。就我个人而言，我喜欢使用AWS lambda函数的无服务器方法。但回到你的方法。我会使用 axios 模块检索数据，非常简单明了。您可以将 x-auth 令牌标头传递给实例

const express = require('express');
const axios = require('axios');
const app = express()
const axiosInstance = axios.create({
baseURL: '<some-domain>',
headers: { 'X-Auth-Token' : '<some-token>'}
});
app.get('/data', async(req, res, next) => {
try {
const response = await axiosInstance.get('/<path>');
// process your data and send back to the user
} catch (error) {
// handle if you got an error
}
})

这只是一个展示，我假设您的应用程序看起来不同，但我认为您从此代码段中得到了一些方向。

我会将令牌隐藏到环境变量中。

当您将服务器部署到heroku时，您将获得一个URL，并且在前端中，您可以轻松替换URL并进行部署。

Answer 2

环境变量在这两种情况下都会为您提供帮助。您可以使用 dotenv 库。代码示例经过简化，以专注于您的问题。

1. 假设您的 React 应用程序向后端端点(localhost：9000/endpoint(发出请求，该端点将从第三方服务请求数据(在本例中使用 got 库(，您将从环境变量中获取身份验证密钥：

require('dotenv').config();  // init env vars
const got = require('got');
const express = require('express');
const router = express.Router();
// getting API key from env variable
const apiKey = process.env.AUTH_KEY;
// GET localhost:9000/endpoint
router.get('/endpoint', async (req, res) => {
// requesting data from 3rd party service
const response = await got('https://thirdpartyservice.com/api', {
headers: {
'x-auth-token': apiKey, // the auth token header
json: true, // assuming response will be "application/json"
},
});
// passing data to React
res.json(JSON.parse(response));
});

2. 您还应该将后端服务 URL 存储在环境变量中。您可能有两个分别用于开发和生产环境的 .env 文件：

发展：

# .env file on your localhost
AUTH_KEY = <your_secret_key>
API_URL=localhost:9000/

生产：

# env vars on heroku
AUTH_KEY = <your_secret_key>
API_URL=<api_server_name>.herokuapp.com/

并将 URL 传递给您的 React 应用程序：

require('dotenv').config();  // init env vars
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// your api server URL from env vars
const apiUrl = process.env.API_URL;
// pass the api URL to your React app
ReactDOM.render(
<App apiUrl={ apiUrl } />,
document.getElementById('root'),
);