Estoy intentando seguir este tutorial ( https://levelup.gitconnected.com/introduction-to-express-js-a-node-js-framework-fa3dcbba3a98 ) para conectar Express con React Native a través de . Tengo un script server.js en ejecución que se conecta al cliente (App.tsx) en mi ip, puerto 3000. El servidor y la aplicación se ejecutan simultáneamente en el mismo dispositivo en diferentes terminales. El servidor puede recibir solicitudes GET sin problemas, ya que cuando se inicia la aplicación, una función useEffect llama a una solicitud GET y el servidor envía un mensaje. Sin embargo, mis solicitudes POST, que contienen un cuerpo de contenido establecido en JSON.stringify("hello world") , no funcionan. y el script del servidor devuelve el siguiente error cada vez que presiono el botón:
SyntaxError: Unexpected token h in JSON at position 0 at JSON.parse (<anonymous>) ...Supongo que estoy enviando json mal formateado, o no he configurado el tipo de contenido correctamente, pero no he podido resolver el problema exacto.
App.tsx (donde myip es mi dirección IP):
import { StatusBar } from 'expo-status-bar'; import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, ScrollView, TouchableOpacity, TextInput } from 'react-native'; export default function App() { const [response, setResponse] = useState(); useEffect(() => { fetch("http://myip:3000/get") .then(res => res.json()) .then(res => console.log(res.theServer)) }, []); async function handleSubmit() { console.log('button press'); const response = await fetch("http://myip:3000/wow/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify("hello world") }); const body = await response.text(); setResponse({ responseToPost: body }); } return ( <View style={styles.container}> <TouchableOpacity onPress={handleSubmit}> <Text>Submit</Text> </TouchableOpacity> </View> } ... });servidor.js
const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const port = process.env.PORT || 3000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get("/get", (req, res) => { res.send({ theServer: "hElLo FrOm YoUr ExPrEsS sErVeR" }); }); app.post("/wow/post", (req, res) => { console.log(req.body); res.send(`Here is what you sent me: ${req.body.post}`); }); app.listen(port, () => console.log(`listening on port ${port}`));Primero, deja de usar body-parser. Express tiene su propio middleware de análisis de cuerpo de solicitud.
app.use(express.json()) app.use(express.urlencoded()) // extended = true is the default El middleware de análisis JSON está configurado para manejar objetos de forma predeterminada. Si bien un literal de cadena como "hello world" es JSON válido, no es lo que espera el marco, de ahí su error.
Dado que parece estar intentando acceder a req.body.post , debe enviar sus datos con esa estructura
fetch("http://myip:3000/wow/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post: "hello world" }) })Alternativamente, si quisiera publicar un literal de cadena JSON, necesitaría configurar su middleware JSON así
app.use(express.json({ strict: false }))
strictHabilita o deshabilita solo aceptar arreglos y objetos; cuando está deshabilitado, aceptará cualquier cosa
JSON.parseacepte.
en cuyo caso su cadena "hello world" aparecería en req.body