我的 React 前端无法调用我的 node-express 后端服务器，全栈应用程序部署在 heroku

Question

const port = process.env.PORT || ("http://localhost:3002")
const postUrl=`${port}/post`;
addData=()=>{
    console.log(postUrl)
    console.log(process.env,"AS")
    Axios.post(postUrl,this.state.form)
    .then((response)=>{
    this.setState({errorMessage:"",successMessage:response.data})})
    .catch((err)=>{      
      this.setState({successMessage:"",errorMessage:err.response.data.message})
    })
  }

When I am calling the backend in the production process.env.PORT is blank.

(process.env.NODE_EV= production which is absolutely correct exactly like in the backend)

My backend is completely fine as it getting the process.env.PORT correctly. But my frontend is not getting the process.env.PORT that's why it keeps calling the other address("http://localhost:3002").

App will completely work fine if I keep open my local machine backend because the "http://localhost:3002" is available to serve. But in production, Heroku keeps changing the process.env.PORT which is showing its value in the backend, not in the frontend

How can I make my frontend to call my backend server properly in production??

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = process.env.PORT || 3002;

const cors = require("cors");
const path=require("path");
const routing  = require("./routing/route");
require('dotenv').config();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use("/",routing);

app.use(function (err, req, res, next) {
  console.log("hii")
  res.status(500).send({ message: err.message });
});

if(process.env.NODE_ENV ==="production"){

  app.use(express.static("client/build"));

  app.get("*",(req,res)=>{
       res.sendFile(path.resolve((__dirname,"client","build","index.html")));
  });
}

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

server file

Answer 1

If your React application is served from your Node.JS application as you said, you could just usewindow.location . window.location is an object that stores statistics about the current page that the user is on, and you could use that to construct a URL and send the server a request, like so:

// This URL uses a template literal, which is a new feature of ES6.
// All but Internet Explorer supports it.
// This is using window.location.protocol, which is either `http:` or `https:`,
// depending on the protocol that the page was loaded with. window.location.host
// is the host that the page was loaded from, with the port number.
const postUrl =
  `${window.location.protocol}//${window.location.host}/post`;

// And then requesting with the URL.
addData = () => {
  console.log(postUrl);
  console.log(process.env, "AS");
  Axios.post(postUrl, this.state.form)
    .then((response) => {
      this.setState({errorMessage: "",successMessage: response.data});
    })
    .catch((err) => {      
      this.setState({successMessage: "",errorMessage: err.response.data.message});
    });
}