I am running this function that should post data to my express server. The function is called when a button is clicked.
const fetchData = async () => {
const response = await fetch('http://localhost:1337/api/test', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: 'hello world'
}),
})
// const data = await response.json()
const data = await response
console.log(data)
}
Here is my express configuration
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.use(express.json())
app.get('/api/test', (req: any, res: any) => {
console.log(req.body)
res.json({ status: 'ok' })
})
app.listen(1337, () => {
console.log('Server started on 1337')
})
The problem is that when I click the button I receive a 404 error for the POST request and my console.log(response) results in the following.
Response { type: "cors", url: "http://localhost:1337/api/test", redirected: false, status: 404, ok: false, statusText: "Not Found", headers: Headers, body: ReadableStream, bodyUsed: false }
body: ReadableStream { locked: false }
bodyUsed: false
headers: Headers { }
ok: false
redirected: false
status: 404
statusText: "Not Found"
type: "cors"
url: "http://localhost:1337/api/test"
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }
You are issuing a POST request from the client end but do not have a POST request handler configured on the server-side. You instead have a GET request handler. The solution is to either add a handler for POST request or turn your POST request method to GET.
You are not returning response from the fetchData function. You should simply return the response as below. -Also there is no post request handler at server side. You can add post request handler as you have written for get request.
const fetchData = async () => {
const response = await fetch('http://localhost:1337/api/test', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: 'hello world'
}),
})
// const data = await response.json()
const data = await response
//need to return response as below
return data.json();
}
In the backend change app.get to app.post
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.use(express.json())
// here
app.post('/api/test', (req: any, res: any) => {
console.log(req.body)
res.json({ status: 'ok' })
})
app.listen(1337, () => {
console.log('Server started on 1337')
})