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

Question

我正在构建一个 React 应用程序，我在其中从第三方站点检索数据，这需要我使用 'X-Auth-Token' 在 header 中发送 API 键。

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

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

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

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

Answer 1

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


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，并且在您的 front-end 中，您可以轻松替换 url 并部署它。

Answer 2

在这两种情况下，

环境变量 都会对您有所帮助。您可以使用 dotenv 库。代码示例已简化以专注于您的问题。

假设您的 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));
});

您还应该将后端服务 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/

并将 URLs 传递给您的 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'),
);

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

Make get request to third party API with api key using express.router();

javascript

reactjs

api

express

express-router