So, I am working on this quiz app that uses the Gemini API for formulating questions. My frontend uses HTML, CSS & JavaScript (Vanilla), while my backend is based on Node.JS (Express)
Whenever I send a fetch request, using the Fetch API, with the form inputs from the user, I always get this response on the console;
POST http://127.0.0.1:5500/genQuestions net::ERR_ABORTED 405 (Method Not Allowed)
See relevant index.js fetch
request below:
await fetch('http://127.0.0.1:5500/genQuestions', { // On the console, this line is usually marked red
method: 'POST',
headers: {
"Content-type": "application/json"
},
body: JSON.stringify(formObj), // The form Data Object
})
.then(response => {
// Handle the server's response
})
Express JS:
// Setting up CORS this way
const cors = require('cors');
app.use(cors());
// Receive Post Requests
app.post('/genQuestions', async (req, res) =>{
const formData = req.body;
// Generate questions
})
My File structure, with the relevant files are shown below:
Image showing the project file structure
My question is, how do i get my server to receive post requests? I feel like being able to modify the ‘Allow: GET, HEAD, OPTIONS’ to include ‘POST’ (See Response Header below) should help but I don’t really know how to modify that.
I appreciate any advice I can get. Like I said earlier, I am new to NodeJS
See the network tab’s response headers below:
// Response Header from Network Tab
HTTP/1.1 405 Method Not Allowed
Access-Control-Allow-Origin: http://127.0.0.1:5500
Vary: Origin
Access-Control-Allow-Credentials: true
Allow: GET, HEAD, OPTIONS
Content-Length: 0
Date: Mon, 17 Jun 2024 11:09:23 GMT
Connection: keep-alive
Keep-Alive: timeout=5