Question

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

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

我已按照教程进行操作，现在有一个在端口3000本地监听的create-react-app项目和一个在端口9000本地监听的Express服务器（使用express.router（））。

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

使用express.router（），我如何向包含我的api密钥的第三方发出请求，然后将其发送到前端？
当我最终托管该项目时（我托管在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库。代码示例经过简化，可以重点解决您的问题。

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

您还应该将后端服务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'),
);

使用express.router（）;使用api密钥向第三方API发出get请求。

2 个答案: