3

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

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

我已经按照教程进行操作，现在有一个 create-react-app 项目在本地侦听端口 3000，以及一个快速服务器（使用 express.router()）在本地侦听端口 9000。

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

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

2 回答 2

3

您说得对，您应该像中间人一样使用将您的数据检索到您的前端。当然有几个实现。我个人喜欢无服务器方法，为此使用 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 并部署它。

于 2019-08-08T10:51:35.940 回答
0

在这两种情况下，环境变量都会对您有所帮助。您可以使用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));
});
  1. 您还应该将后端服务 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'),
);
于 2019-08-08T11:11:24.543 回答