Estoy tratando de crear un sistema básico de registro de usuarios. Todo lo que quiero en este momento es que una vez que me registre con el formulario HTML, debería poder consolarlo. Iniciar sesión en el servidor. Intenté hacer esto usando fetch pero me sale este error:
Fetch API no puede cargar el archivo:///C:/api/register. El esquema de URL "archivo" no es compatible.
Este es el código:
índice.html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Register</title> </head> <body> <h1>Registration</h1> <form id="reg-form"> <input type="text" placeholder="Username" id="username" autocomplete="off"/> <input type="password" placeholder="Password" id="password"/> <input type="submit" value="Submit Form"/> </form> </body> <script> const form = document.getElementById('reg-form') form.addEventListener('submit', registerUser) async function registerUser(event) { event.preventDefault() const username = document.getElementById('username').value const password = document.getElementById('password').value const result = fetch('/api/register', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username, password}) }).then(res => res.json()) console.log(result) } </script> </html>Servidor expreso:
const express = require('express') const path = require('path') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.json()) app.post('/api/register', async (req, res) => { console.log(req.body) res.json({status: 'ok'}) }) app.listen(4000, () => console.log('Server up at 4000'))También intenté hacer la solicitud POST directamente desde el elemento de formulario HTML configurando el atributo de método en POST y el atributo de acción apuntando a la ruta de publicación en mi servidor express. Cuando intento enviar el formulario, me redirige a una página vacía que dice "No se pudo acceder a su archivo. Es posible que se haya movido, editado o eliminado".
¿Qué puedo hacer para arreglar esto?
Está abriendo el archivo html manualmente, no sirviéndolo desde el servidor, por lo que /api/register no va a su backend. Sirva el archivo desde su servidor o busque localhost:4000/api/register
Para servir su archivo desde el servidor, puede hacer esto:
const path = require('path'); ... app.get('/', (req, res) => { res.sendFile(path.resolve(__dirname, '../relative/path/to/index.html')); });En lugar de obtener /api/register, intente http://localhost:4000/api/register
también para imprimir el resultado intente esto:
fetch('http://localhost:4000/api/register', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username, password}) }) .then(res => res.json()) .then(data => console.log(data))