NodeJS 部署时更改server.js

92dk7w1h  于 2023-01-25  发布在  Node.js
关注(0)|答案(2)|浏览(129)

我几乎不知道NodeJS,但我正在建立我的投资组合网站在React,我想包括一个联系表。我使用nodemailer,但有一些我不知道:我有一个监听端口5000的server.js文件(app.listen(5000, () => console.log("Server: Running"));),当用户提交表单时,我有一个handleSubmit函数在运行:

const handleSubmit = async (e) => {
  e.preventDefault();
  setButtonText("Sending...");
  let response = await fetch("http://localhost:5000/contact", {
    method: "POST",
    headers: { "Content-Type": "Application/json;charset=utf-8" },
    body: JSON.stringify(formDetails),
  });
  setButtonText("Send");
  let result = response.json();
  setFormDetails(formInitialDetails);
  if (result.code === 200)
    setStatus({ succes: true, message: "Message sebt successfully" });
  else setStatus({ succes: false, message: "Something went wrong!" });
}

和形式:<form onSubmit={handleSubmit}>...</form>
现在我的问题是:如果我的handleSubmit函数正在侦听http://localhost:5000/contact,我应该做什么(更改)才能让这个React应用在部署时按预期工作。我的意思是:如果我用GitHub Pages或者Netlify来部署这个,URL会和http://localhost:5000/contact不一样,对吧,那么在部署之前我需要做什么呢?

c3frrgcw

c3frrgcw1#

你可以只使用环境变量,而不是让你的网址在你的代码。像:

const response = await fetch(process.env.serverUrl, {
    method: "POST",
    headers: { "Content-Type": "Application/json;charset=utf-8" },
    body: JSON.stringify(formDetails),
  });

然后在Github Pages中设置您的环境变量serverUrl(参见此处)

f5emj3cl

f5emj3cl2#

你应该根据页面的原始url动态添加url,你可以用javascript这样做,在你的情况下试试这个:

let response = await fetch(`${window.location.protocol}//${window.location.host}/contact`, {
    method: "POST",
    headers: { "Content-Type": "Application/json;charset=utf-8" },
    body: JSON.stringify(formDetails),
  });

相关问题