reactjs - Herokuapp 无法连接到后端 api

Question

我现在正在开发一个小型网络应用程序，但在使用 Heroku 应用程序时遇到了一些问题。我已经将它部署到 Herokuapp 但每次我尝试访问 API 时都会返回错误

Uncaught (in promise) Error: Request failed with status code 504

我对此感到困惑，因为当我在本地运行 React 应用程序时，一切似乎都运行良好。我很确定我已经正确设置了代理和 API 端点，并在部署到 Heroku 应用程序时执行了必要的步骤，例如process.env.PORT || 5000在侦听服务器端口时允许。

setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

服务器.js

require("dotenv").config();
const OpenAI = require("openai-api");
const express = require("express");
const app = express();
const port = process.env.PORT || 5000;

app.use(express.json());

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

const OPENAI_KEY = process.env.OPENAI_API_KEY;

const openai = new OpenAI(OPENAI_KEY);

app.post("/api/request", (req, res) => {
  console.log("accessed request endpoint!");
  const { value } = req.body;

  (async () => {
    try {
      const gptResponse = await openai.answers({
        documents: [],
        question: value,
        search_model: "davinci",
        model: "curie",
        examples_context: "In 2017, U.S. life expectancy was 78.6 years.",
        examples: [
          ["What is human life expectancy in the United States?", "78 years."],
        ],
        max_tokens: 128,
        stop: ["\n", "<|endoftext|>"],
      });

      res.status(200).send({
        status: "Success",
        data: gptResponse.data,
      });
    } catch (error) {
      console.log("ERROR!!!");
      console.log(error);
    }
  })();
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

请求.js

  const onSubmit = (e) => {
    e.preventDefault();
    axios
      .post("/api/request", {
        value: value,
      })
      .then((res) => {
        const gptResponse = res.data.data.answers[0];
        setReqCount(reqCount + 1);
        const element = reqCount;
        var obj = {};
        obj[element] = gptResponse;
        setResponse((currResponses) => [...currResponses, obj]);
      });
  };

我不完全确定我在这里缺少什么。在本地一切正常，但在 herokuapp 的后端似乎不起作用。

标签： reactjsexpressheroku