Estoy en un proyecto con amigos y uno se encarga de montar el servidor y yo de mandar la info al servidor lo estamos guardando todo en json (por ahora) la cosa es que no consigo que mi componente de react le envia la informacion al server El servidor:
const express = require('express');
const path = require('path');
const fs = require('fs');
const cors = require('cors'); // Importa el módulo CORS
const app = express();
const port = 1221; // Puerto para el servidor backend
// Middleware para permitir solicitudes desde cualquier origen
app.use(cors());
// Middleware para servir archivos estáticos desde el directorio 'backend/public'
app.use(express.static(path.join(__dirname, 'public')));
// Endpoint para servir el archivo JSON
app.get('/bp-data-json', (req, res) => {
const jsonPath = path.join(__dirname, 'bp-data.json'); // Ruta al archivo JSON en backend
fs.readFile(jsonPath, 'utf8', (err, data) => {
if (err) {
console.error('Error leyendo el archivo JSON:', err);
res.status(500).send('Error interno del servidor');
return;
}
res.json(JSON.parse(data));
});
});
// Iniciar el servidor
app.listen(port, () => {
console.log(`Servidor backend escuchando en http://localhost:${port}`);
});
Mi componente de prueba para intentar meter el json
import React from "react";
const enviarJSON = (jsonData) => {
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(jsonData),
};
fetch("http://localhost:3001/prueba-json", requestOptions)
.then((response) => {
if (!response.ok) {
throw new Error("Error al guardar el JSON en el servidor");
}
console.log("JSON guardado correctamente en el servidor");
})
.catch((error) => {
console.error("Error al guardar JSON:", error);
});
};
const CrearYEnviarJSON = () => {
const handleClick = () => {
const jsonData = {
elemento1: "valor1",
elemento2: "valor2",
};
enviarJSON(jsonData);
};
return (
<div>
<button className="bg-white" type="button" onClick={handleClick}>
Enviar JSON
</button>
</div>
);
};
export default CrearYEnviarJSON;
import React from "react";
const enviarJSON = (jsonData) => {
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(jsonData),
};
fetch("http://localhost:3001/prueba-json", requestOptions)
.then((response) => {
if (!response.ok) {
throw new Error("Error al guardar el JSON en el servidor");
}
console.log("JSON guardado correctamente en el servidor");
})
.catch((error) => {
console.error("Error al guardar JSON:", error);
});
};
const CrearYEnviarJSON = () => {
const handleClick = () => {
const jsonData = {
elemento1: "valor1",
elemento2: "valor2",
};
enviarJSON(jsonData);
};
return (
<div>
<button className="bg-white" type="button" onClick={handleClick}>
Enviar JSON
</button>
</div>
);
};
export default CrearYEnviarJSON;
```hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhuuh huhuh uh uh uh uhh