Я успешно развернул свое приложение реакции на heroku - http://goku -portfolio.herokuapp.com внутри веб-сайта есть страница с именем contact (вы можете видеть это на панели навигации), где появляется формакоторый содержит три поля, данные которых хранятся в mongodb.Проблема, с которой я сталкиваюсь, заключается в том, что после ввода данных, когда я нажимаю на кнопку отправки, он перенаправляет на порт 2000 локального хоста, о чем я упоминал в файле contact.js, из-за чего серверная часть успешно работает на моем компьютере, ноне на других машинах.Также после предоставления данных я хочу, чтобы пользователь перенаправил обратно на домашнюю страницу (то есть по вышеуказанной ссылке), которая также не работает.пожалуйста, скажите мне, какие изменения мне нужно будет сделать, чтобы мое приложение перестало использовать порты localhost.PS - сервер узла работает на порте 2000 (имя файла db.js)
db.js
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var dbConn = mongodb.MongoClient.connect(
process.env.MONGODB_URI ||
"mongodb://user:pass@ds019633.mlab.com:19633/heroku_dtl69fwz"
);
var app = express();
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();
});
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.resolve(__dirname, "src/components/contact.js")));
if (process.env.NODE_ENV === "production") {
app.use(express.static("src/build"));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "src", "build", "index.html"));
});
}
app.post("/post-feedback", function(req, res) {
console.log("something");
dbConn.then(function(db) {
delete req.body._id; // for safety reasons
db.collection("feedbacks").insertOne(req.body);
});
res.write("<html><body>");
res.write("Data received:\n" + JSON.stringify(req.body));
res.write("You will be redirected shortly to the home page");
res.write(
"<script>setTimeout(function(){ window.location.href = 'https://goku-portfolio.herokuapp.com'; }, 3000);</script>"
);
res.write("</body></html>");
res.send();
// res.sendFile("src/components/contact.js");
});
// app.get("/landingPage", function(req, res) {
// res.sendFile(__dirname + "src/components/contact.js");
// });
app.listen(process.env.PORT || 2000, process.env.IP || "0.0.0.0");
contact.js
import React, { Component } from "react";
class Contact extends Component {
state = {};
render() {
return (
<div className="container">
<div className="row bg-contact justify-content-center">
<div className="col-6">
<form
className="form-style"
method="POST"
action="http://localhost:2000/post-feedback"
>
<h1>Hola!</h1>
<h4>
{" "}
I am based out of Delhi and will be happy to assist you with
your request
</h4>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input
type="email"
name="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
></input>
package.json
{
"name": "resume",
"version": "0.1.0",
"private": true,
"dependencies": {
"body-parser": "^1.19.0",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"mongodb": "^2.2.33",
"popper.js": "^1.15.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "cd src && npm install && npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {},
"keywords": [],
"author": "",
"license": "ISC"
}
Я изменил действие формы с https://localhost:3000/ на http://goku -portfolio.herokuapp.com / 2000 .