Heroku + MERN stack - HTTP POST request voids of any values

Question

I try to sent HTTP POST request to my Mlab database.

In development, everything is fine. But in production environment, my requests are sent void of any values.

I use MongoDB + Express + Reactjs + Node - the MERN STACK - + Heroku PaaS.

Also, I have received at the beginning of my session a message about the fact that:

Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script

But I don't receive this message anymore currently: I have set up my service worker on update on each reloads and move a copy of my serviceworker.js in my HTML folder.

Why my HTTP POST requests are still voids when I sent them?

Regarding my logs, seems there is a problem with my service workers and a file.map:

2018-05-24T18:25:39.795372+00:00 heroku[router]: at=info method=GET
path="/static/js/main.3685cd33.js.map" host=#.com
request_id=03674121-2fac-42ec-9459-e5fa17eb2ea7 fwd="93.27.27.184" dyno=web.1 connect=0ms service=7ms status=404 bytes=413 protocol=https 2018-05-24T18:25:41.576623+00:00 heroku[router]: at=info method=GET path="/service- worker.js" host=#.herokuapp.com request_id=065fb0eb-6606-4603- 8673-75e59445a1ea fwd="93.27.27.184" dyno=web.1 connect=0ms service=1ms status=404 bytes=400 protocol=https 2018-05-24T18:25:41.902150+00:00 heroku[router]: at=info method=GET path="/static/css/main.969d7734.css.map" host=#.herokuapp.com request_id=a16b6a78-9167-4672-9888-3f141a46c3ef fwd="93.27.27.18

4" dyno=web.1 connect=0ms service=1ms status=404 bytes=415 protocol=https Here my App.js :

  (...)
alert("word = "+ this.state.word) //  **SO FAR, THE VALUE IS STILL DISPLAYED**
fetch("/api/words",{
 method:"POST",
 headers: {
   'Accept': 'application/json, text/plain, */*',
   'Content-Type':'application/json'
 },
 body:JSON.stringify({ // **THEN I LOST THE CONTACT WITH THE VALUES FROM HERE**
                       "word":this.state.word,
                       "definition":this.state.definition,
                       "sound":this.state.audioRecorded
                     })
})
.then((res) => res.json())
.then((data) => console.log(data))

  }


   <form>
    (...)
   </form>
  )
 } 
 };

Here my server.js :

const {createServer} = require("http");
var express = require("express")
var path = require("path")
var app = express() ;
var port = process.env.PORT || 7500 ;
var databaseName = "ntsat";
var bodyParser = require("body-parser");
app.use(bodyParser.json()) ;
app.use(express.static(path.join(__dirname, '../react-ui/public/index.html')));
var mongoose = require("mongoose");
var url = process.env.MONGOLAB_URI;
mongoose.connect([url to my mlab])
var db = mongoose.connection;
db.on ("error", console.error.bind(console, "connection fails"))
db.once("open", function () {
console.log(`mongoose : connection succeed on ${databaseName} database`); 
});
 app.use("/api", require("./router/router.js"));
 app.listen( port, function(){
   console.log("Express server listening on port %d in %s mode", this.address().port, 
 app.settings.env); 
 });
 module.exports = app;

Webwoman Webwoman · Accepted Answer · 2018-05-31T21:18:56

0

votes

I have change the Fetch module for the Axios module, now it's work fine.

Heroku + MERN stack - HTTP POST request voids of any values

1 Answers