J'ai un simple div avec du contenu éditable et je récupère ce que l'utilisateur a tapé dans ce div avec un événement onclick. Je veux envoyer ces données à ma base de données dans Mlab, j'héberge mon application sur Heroku. Actuellement, lorsque j'essaie d'envoyer les données, j'obtiens une erreur 404 et après quelques secondes, j'obtiens GET http://localhost:3000/static/js/0.chunk.js net::ERR_CONNECTION_REFUSED
et je ne sais pas pourquoi, puisque je suis capable de récupérer les données déjà existantes via une requête get. Qu'est-ce que je fais de mal ici et comment puis-je faire en sorte que cette requête post réussisse ? Voici mon composant :
import React, { Component } from 'react';
import axios from 'axios';
class CommentBox extends Component {
constructor(props) {
super(props);
}
state = {
userComments: []
}
componentDidMount() {
const fetchPosts = async () => {
const res = await axios.get('https://backend-express.herokuapp.com/userComments');
this.setState({...this.state, userComments: res.data})
};
fetchPosts();
}
getCommentData = () => {
const commentContent = document.querySelector(".comment-box-container__div-comment-box").textContent;
axios.post('https://backend-express.herokuapp.com/userComments', { commentContent })
}
render() {
return(
<div className="comment-box-container">
<div className="comment-box-container__div">
<button className="comment-box-container__post-comment-btn" onClick={this.getCommentData}> Post Comment</button>
<div className="comment-box-container__div-comment-box" contentEditable="true"></div>
</div>
<div className="comment-box-container__show-coments-section">
{this.state.userComments.map(comment =>
<section>
<h3>{comment.date}</h3>
{comment.title}
</section>
)}
</div>
</div>
)
}
}
export default CommentBox;
et mon server.js :
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const PORT = process.env.PORT || 3001;
const itemRoutes = express.Router();
app.use(cors());
app.use(bodyParser.json());
mongoose.connect("mongodb://admin:user@password/fghfghfhf", { useNewUrlParser: true } )
const connection = mongoose.connection;
connection.once('open', function() {
console.log('Connection to MongoDB established succesfully!');
});
// Serve static assets
if(process.env.NODE_ENV === 'production') {
app.use(express.static('build'));
}
itemRoutes.route('/').get( async (req, res) => {
let collection = connection.collection("posts");
let response = await collection.find({})
.toArray();
res.send(response);
});
itemRoutes.route('/userComments').get( async (req, res) => {
let collection = connection.collection("user_comments");
let response = await collection.find({})
.toArray();
res.send(response);
});
app.use('/', itemRoutes);
app.use('/userComments', itemRoutes);
app.listen(PORT, function() {
console.log('Server is running on' + ' ' + PORT);
})