es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Error de datos de formulario No se pueden establecer encabezados después de que se hayan enviado al cliente.

Error de datos de formulario No se pueden establecer encabezados después de que se hayan enviado al cliente.

06 Aug, 2023 Programación

Intentando subir una imagen al blob de almacenamiento de Azure, pero el método “fetch” no funciona.

Funciona correctamente en Postman, pero muestra un error en fetch.

No hay problema en la implementación de Heroku.

¿Cuál es el problema en este código?

Este es el código que he intentado:

const uploadImage = async () => {
    try {
      const Data = new FormData();

      Data.append('file', image);

      console.log("form data", Data);

      await fetch('https://fame-azure.herokuapp.com/aa', {
        method: 'POST',
        body: Data
      })
    } catch (err) {
      console.log(err);
    }
}

Código en el backend:

app.post('/aa', upload.any(), function (req, res, next) {
  console.log(req.files)
  res.send('ok')
  res.status(200).send('Uploaded: ' + req.files)
}

Error:

Descripción de la imagen

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código proporcionado es que no envía las cabeceras de solicitud y el tipo de contenido. Blob de almacenamiento de Azure requiere un tipo de contenido válido para aceptar el archivo de entrada.

    Para solucionar este problema, puedes intentar especificar las cabeceras en la solicitud fetch. Puedes agregar la cabecera de tipo de contenido de la siguiente manera:

    const uploadImage = async () => {
    try {
        const Data = new FormData();
        Data.append('file', image);
        console.log("form data", Data);

        const options = {
            method: 'POST',
            body: Data,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        };

        await fetch('https://fame-azure.herokuapp.com/aa', options);
    } catch (err) {
        console.log(err);
    }
};

    Al especificar la cabecera Content-Type, Blob de almacenamiento de Azure puede aceptar la imagen cargada.

    Además, debes eliminar la segunda declaración res.send en el código del backend porque envía un mensaje de respuesta después de que se haya enviado la respuesta.

Comments are closed.