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

Question

我正在构建一个 React 应用程序，并在其中从第三方站点检索数据，该站点要求我使用“X-Auth-Token”在标头中发送 API 密钥。

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

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

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

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

Answer 1

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

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库）请求数据，您将从环境变量中获取 auth 密钥：

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'),
);