使用 Create React App 代理通过代理服务器获取 API 数据的问题

Question

我有一个应用程序，单击按钮即可使用axios从Dark Sky API获取数据。 Dark Sky文档建议我使用代理服务器来执行 API 调用，以隐藏我的 API 密钥。

从那以后，我试图创建所述代理服务器。

项目

\app
   \src\utils\index.js
   \src\App.js
   \proxy\index.js
   \package.json

package.json

  {
    "start": "react-scripts start",
    "server": "node-env-run proxy --exec nodemon",
    "all": "run-p server start"
  },
  "proxy": "http://localhost:3030"

这是我在网上遵循的配置，演示了 RCA 和代理服务器的并行运行。

代理/index.js

const express = require('express');
const bodyParser = require('body-parser');
const fn = require('../src/utils').mockQuery;
const port = process.env.REACT_APP_PROXY_PORT | 3030;
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.get('/api/', (req, res) => {
  const lat = req.query.lat;
  const lng = req.query.lng;
  res.setHeader('Content-Type', 'application/json');
  const [err, result] = fn(lat, lng);
  res.send("Done");
});

app.listen(port);

这是代理文件，其中端点/api/将根据参数返回 json object params: lat lng

实用程序/index.js

export const mockQuery = async ({lat, lng}) => {
    return await axios.get('/api/', {
        params: {
            lat: lat,
            lng: lng
        }
    })
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
}

此代码应简单地将get:/api/<params>调用的 output 打印到代理服务器。

但我收到这样的错误：

xhr.js:166 GET http://localhost:3000/api/?lat=10.6495918&lng=-61.5142371 500 (Internal Server Error)

我会注意到，这是在代理在3030上运行时查询端口3000 。 我打算将此推送到实时托管解决方案。 所以我想我的问题是：我如何让它首先查询我的代理端口？ 我只是获取http://localhost:3030/api/吗？ （以及这如何影响我的应用程序在构建时的执行）

...鉴于这是解决方案，因此还有其他问题。

我需要创建另一个 function 吗？ 一种是使用axios来攻击代理，另一种是代理触发使用axios来攻击Dark Sky API ？