Estoy tratando de enviar un archivo JSON desde el cliente al servidor, pero cuando intento hacerlo aparece el error: "No hay encabezado 'Access-Control-Allow-Origin' en el recurso solicitado". También recibo los errores "POST http://localhost:3000/net::ERR_FAILED" y "Uncaught (in promise) TypeError: Failed to fetch at index.js:6:1", pero no estoy seguro de si Eres relevante o sintomático del primer error. Estoy usando localhost:8000 para ejecutar mi interfaz.
Cliente
let data = { 'subject': 'test' } fetch('http://localhost:3000', { method : 'POST', headers: {'Content-Type' : 'application/json'}, body : JSON.stringify(data) }) .then(response => response.json()).then(data => console.log(data));Servidor
const express = require('express'); const app = express(); app.use(express.json()); const port = 3000; app.post('/', (req, res) => { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000'); console.log("Success"); }); app.listen(port);Soy nuevo en los conceptos relacionados con la conexión de los extremos frontal y posterior de un sitio web, pero quería aprender cómo hacerlo para un proyecto. Comencé siguiendo un tutorial que sugería establecer el encabezado de respuesta "Access-Control-Allow-Origin: http://localhost:8000" en la respuesta del lado del servidor, que funcionó muy bien para las solicitudes GET. Pero cuando traté de hacer lo mismo con una solicitud POST, comencé a recibir el error.
Cuando envío la solicitud POST sin encabezados ni cuerpo, funciona bien e incluso puedo recibir una respuesta sin el error. También intenté agregar los encabezados "Access-Control-Allow-Headers: Content-Type" y "Content-Type: application/json" a la solicitud en el servidor con el encabezado "Access-Control-Allow-Origin", pero al mismo problema.
He adjuntado el error completo en caso de que sea útil. Soy nuevo en publicar en foros de ayuda, por lo que si necesita más información o una mejor manera de escribir o publicar mis preguntas en el futuro, hágamelo saber; Me gustaría arreglarlo. ¡Gracias!
Su cliente se ejecuta en el puerto localhost 8000, mientras que su backend se ejecuta en el puerto localhost 3000, lo que provoca un problema de uso compartido de recursos entre orígenes (CORS) .
Básicamente, Javascript que se ejecuta en una aplicación solo puede comunicarse con un servidor del mismo origen de forma predeterminada.
Una manera fácil de solucionar esto es usar el middleware Node cors .
Ejecutar npm i cors
Luego en tu servidor:
const cors = require('cors'); app.use(cors());Esto debería permitir solicitudes de otros orígenes.
EDITAR: investigué su problema un poco más y parece que la razón por la que su código original no funcionaba era porque el servidor no responde a la solicitud previa al vuelo . Pude hacer que su código funcionara en mi máquina siguiendo esta respuesta en SO.
Así es como se ve el servidor ahora:
const express = require('express'); const app = express(); app.use(express.json()); const port = 3000; app.options('/', (req, res) => { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader('Access-Control-Allow-Methods', '*'); res.setHeader("Access-Control-Allow-Headers", "*"); res.end(); }); app.post('/', (req, res) => { console.log("Success"); }); app.listen(port);