Estoy ejecutando esta función que debería publicar datos en mi servidor express. La función se llama cuando se hace clic en un botón.
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) }Aquí está mi configuración expresa
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') }) El problema es que cuando hago clic en el botón recibo un error 404 para la solicitud POST y mi console.log(response) da como resultado lo siguiente.
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(), … }Está emitiendo una solicitud POST desde el extremo del cliente, pero no tiene un controlador de solicitudes POST configurado en el lado del servidor. En su lugar, tiene un controlador de solicitud GET. La solución es agregar un controlador para la solicitud POST o cambiar su método de solicitud POST a GET.
No está devolviendo la respuesta de la función fetchData. Simplemente debe devolver la respuesta como se muestra a continuación. -Además, no hay un controlador de solicitud posterior en el lado del servidor. Puede agregar un controlador de solicitud posterior como lo ha escrito para la solicitud de obtención.
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();}
En el cambio de backend app.get a 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') })