I have been working on creating a JSON file from buttons. While I am able to retrieve data from the JSON files that I created, I am facing issues with posting to them using XMLHttpRequest and Ajax. Interestingly, I can add to a JSON file using routes just by using the URLs alone, but I'm struggling to figure out how to set up a route for the following code.
No matter what I try, I keep encountering a '405 error message - Method Not Allowed'. I have already granted permission for the site through Google Chrome Settings Security and have installed all necessary packages like NPM Cors and Body-Parser.
What am I missing that is causing the 405 error to persist? Do I need to create a specific route for adding data, similar to what is used for a form?
Any help or advice on this issue would be greatly appreciated. Thank you!
In my Server.js:
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var cors = require("cors");
// PORT CONNECTION
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`Server Port: ${PORT}`);
});
//PUBLIC FOLDER
app.use(express.static('public'));
// parse application/json
var jsonBP = app.use(bodyParser.json());
app.use(function (req, res) {
res.setHeader('Content-Type', 'application/json');
});
// POST /api/users gets JSON bodies
app.post('/api/actions', jsonBP, function (req, res) {
buttons.response // not sure what this line does?
});
//CORS
app.use(cors());
Javascript snippet:
for (i = 0; i < facialExpressions.length; i++) {
var CreateButton = document.createElement("button");
var section = "Facial Expressions";
CreateButton.innerText = facialExpressions[i];
document.getElementById("facial").appendChild(CreateButton);
CreateButton.addEventListener("click", function (e) {
e.preventDefault();
var params = JSON.stringify({
action: this.innerHTML,
date: Date(),
section: "Facial Expressions",
videoID: videoID,
username: username
});
console.log(params);
xhr.open("post", "./db/actions.json", true);
xhr.setRequestHeader("Content-Type", "application/json");
console.log('READYSTATE: ', xhr.readyState);
xhr.onreadystatechange = () => {
if(xhr.readyState == 4 && xhr.status ===201){
let object = JSON.parse(xhr.response);
console.log(object);
}
}
xhr.send(encodeURIComponent(params));
});
}
HTML code fragment:
</br></br>
<p id="status"></p>
<table>
<tr>
<td width="10%">
<h3>Facial Expressions</h3>
</td>
<td width="50%">
<h3>Video</h3>
</td>
<td width="40%">
<h3>Physical Actions</h3>
</td>
</tr>
<tr>
<td>
<div id="facial"></div>
</td>
<td>
<div id="videoPlayer"></div>
<div>
<button id="start">Start</button>
</div>
</td></tr>
<tr>
<td colspan="3">
<div id="actions"></div>
</td>
</tr>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../script.js"></script>