Whenever I try to run a post request in my React app, I encounter the "431 (Request Header Fields Too Large)" error and I'm unable to identify the cause. Is there anyone who can assist me with this problem?
I've attempted various solutions based on responses to similar inquiries:
- Clearing cache and cookies
- Upgrading from node version v12.19.0 to v14.17.2
- Specifying header specifications in the request
The function responsible for submitting the POST request:
handleSubmit(evt){
axios.post('/creator/new', {
username: this.state.username,
password: this.state.password,
profilePic: this.state.profilePic,
firstName: this.state.firstName,
lastName: this.state.lastName,
dob: this.state.dob,
country: this.state.country
}, {headers: {
'Accept': 'application/json',
'Content-Type': 'application/json; charset=UTF-8'
}}).then(response => {
console.log('response received');
})
evt.target.reset();
this.props.history.push(`/creator/${this.state.username}`);
this.props.addCreator(this.state);
}
Server details:
const express = require('express');
const cors = require('cors');
const creatorsRoutes = require('./routes/creators-routes');
const ipsumsRoutes = require('./routes/ipsums-routes');
const app = express();
app.use(cors());
app.use(express.json());
app.use((req, res, next) => {
console.log('request received')
res.send(req.path);
console.log('request body sent back')
})
app.use('/creator', creatorsRoutes);
const mongoose = require('mongoose');
mongoose.connect("mongodb+srv://SkyeWulff:************retryWrites=true&w=majority", {useNewUrlParser: true, useUnifiedTopology: true})
.then(() => {
console.log('Connection open');
})
.catch(err => {
console.log('Error occured:');
console.log(err);
})
let db = mongoose.connection;
db.on('error', console.error.bind(console, 'Connection Error'));
db.once('open', function(){console.log("successfully connected to MongoDB")});
app.listen(5000, () => {
console.log("listening on port 5000");
})
Router used by the server:
const express = require('express');
const creatorsController = require('../controllers/creators-controllers');
const router = express.Router();
router.get('/creator/id', creatorsController.getCreator);
router.post('/new', creatorsController.addCreator);
module.exports = router;
Controller employed by the router:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const creatorSchema = new Schema({
username: String,
password: String,
profilePic: String,
firstName: String,
lastName: String,
dob: Date,
country: String
});
module.exports = mongoose.model('Creator', creatorSchema);
Filetree Structure: Filetree