如何将 React + Node.js 应用程序部署到 Heroku。 收到来自反应的 axios 请求的错误 405

Question

can you please look into my code? I am able to create an app on localhost:5000 (node+react) but when I deployed it in Heroku I can't get the response from the POST request. All it is giving me is 405 error. I have been fixing it for 2 days but not getting any solution. If you can help me it will be highly appreciated.

Here is the error message from web console: Uncaught (in promise) Error: Request failed with status code 405

here is my github repo link to review my code: github.com/sajpanchal/portfolio

Here is my react code aboutme.js:

    handleSubmit = (event) => {
        const data = { ...this.state.data };
        event.preventDefault();
        axios.post(`${BASE_API_URL}/api/email`, data).then((res) => {
          console.log(res);
          console.log(res.data);
        });
      };

Here is my node.js file index.js:

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const logger = require("morgan");

const app = express();
var nodemailer = require("nodemailer");
require("dotenv").config();

const { USER_PASSWORD, USER_EMAIL, RECEIVER_EMAIL } = process.env;
console.log(USER_PASSWORD);
//React build app setup
app.use(express.static(path.join(__dirname, "build"))); // serve all static files from build

app.use(logger("dev"));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html")); // this will keep our client side routing functional.
});

app.use(bodyParser.json());
// // allows your app to interact with the apps running on different servers.

//this will set the htstp server response header.
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Acess-Control-Allow-Headers", "Content-Type , Authorization");
  next();
});
//get request
app.get("/api", (req, res, next) => {
  res.send("API status: OK");
});

var transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: USER_EMAIL,
    pass: USER_PASSWORD,
  },
});

app.post("/api/email", (req, res, next) => {
  var mailOptions = {
    from: req.body.email,
    to: RECEIVER_EMAIL,
    subject: req.body.subject,
    html: `<strong>sender: ${req.body.email}</strong><br>Message: <strong>${req.body.message}</strong>`,
  };

  transporter.sendMail(mailOptions, function (error, info) {
    if (error) {
      res.status(400).json({
        error: error,
      });
    } else {
      res.status(200).json({
        success: true,
      });
    }
  });
});

const port = process.env.PORT || 5000;
app.listen(port, "0.0.0.0");
console.log("connected to port: ", port);

the full project is available on github: https://github.com/sajpanchal/portfolio

Please note that I have added nodejs project into my react project root folder and then I created a build version of react for node project.

Here is the error screenshot:

Heroku log:

Answer 1

Please disregard the above question as I found the solution.

So, I literally did 2 things:

1> I reinstalled the node packages in both node and react apps. I can possibly install new packages that are required in your projects and we can get rid of unused ones.

2> There was some issue with my Heroku App. So I deleted it and created a new one.

Then I deployed my updated app from git to the new Heroku app and it started to work as expected!

Thanks to all who contributed to this post. Cheers.