Question

今天早上，我成功在heroku中部署了MERN堆栈登录应用程序。但是，当我尝试登录

获取http://localhost:5000/user/login/email/password网：: ERR_CONNECTION_REFUSED 在控制台中。

我知道该错误是因为我正在使用

在axios中发出get请求

    axios.get("http://localhost:5000/user/login/" + this.state.email + "/" + this.state.password).then((res) => {
                if (res.status === 200) {
                    this.setState({ status: res.status, name: res.data.name });
                    console.log(res.data);
                }
                else
                    throw new Error(res.status);
            }).catch((err) => {
                this.setState({ isInvalid: true });
            })

但是，端口是在服务器端动态分配的。

    const port = process.env.PORT||5000;

    app.listen(port, () => {
        console.log("Server started on port:" + port);
    });

尝试仅将硬编码值分配给端口。还是没有运气

Answer 1

首先，我建议您不要使用get request方法进行登录。其次，如果您已经部署了后端代码，则使用heroku提供的动态URL进行登录请求。例如如果您的网址是xyz.heroku.com，则axios.get('xyz.heroku.com/user/login/'+email+'/'+password); 现在，您无需对端口进行硬编码或使用localhost。

Answer 2

您的代码中有很多错误。您已经部署了应用程序，但是您的URL仍然是localhost，而不是Heroku URL。首先，您需要像这样为应用程序设置env变量。

您可以将其放在到达终点的某个恒定文件中。不要在ajax调用中直接编写 END POINTS 。使用常量并为您执行应用程序的所有ajax调用的位置创建一个文件。

您可以同时为前端和后端设置env，这就是您应该使用的方式。开发环境应与生产环境分开。

if (process.env.NODE_ENV === "development") {
  API = "http://localhost:8000";
} else if (process.env.NODE_ENV === "production") {
  API = "https://be-prepared-app-bk.herokuapp.com";
}

请勿使用GET进行登录以及在参数中发送电子邮件和密码。您应该使用POST并将正文中的所有数据发送出去。

这是您单个ajax文件应具有的外观：

import { API_HOST } from "./constants";
import * as auth from "../services/Session";

const GlobalAPISvc = (endPoint, method, data) => {
  const token = auth.getItem("token");
  const uuid = auth.getItem("uuid");
  return new Promise((resolve, reject) => {
    fetch(`${API_HOST}${endPoint}`, {
      method: method,
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
        "x-authentication": token,
        uuid: uuid
      }
    })
      .then(res => {
        return res.json();
      })
      .then(json => {
        resolve(json);
      })
      .catch(error => {
        reject(error);
      });
  }).catch(error => {
    return error;
  });
};

export default GlobalAPISvc;

我在MERN中创建了一个应用程序，并已在GitHub上公开。随时寻求帮助。 Repository Link

如何使用axios处理react.js端动态分配的后端端口？

2 个答案: