（节点：23）UnhandledPromiseRejectionWarning：错误[ERR_HTTP_HEADERS_SENT]：将标头发送到客户端后无法设置标头

Question

I am creating an application and when I try to upload an image it gives this error in the console: (node:23) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client. How can I solve this?

My fetch:

let formData = new FormData();
formData.append('arquivo', document.querySelector('input[name="arquivo"]').files[0])
formData.append('candy', candy)
formData.append('theme', document.getElementById('candytheme').value)

fetch('https://nodemae.herokuapp.com/candy', { method: 'post', headers: {'x-auth-token': window.sessionStorage.getItem('token') }, body: formData}).then

My server side:

async store(req, res) {
    let candy= req.body.candy;
    let name= uniqid(doce+'-')+'.jpg';
    let route= `/img/${doce}/`;
    let theme= req.body.theme;
    let sampleFile = req.files.arquivo;
    sampleFile.mv(`./public${route}${name}`, function(err){
        if (err) {
            return res.send(err)
        }
    });
    const candy = await Candy.create({
        name: name,
        candy: candy,
        route: route,
        theme: theme
    });

    return res.json(candy);
},

The return res.json (candy); returns this:{"errno":-2,"code":"ENOENT","syscall":"open","path":"./public/img/paomel/paomel-q6zynjrg8w45y.jpg"}

Answer 1

You are getting this error because of this callback function

 sampleFile.mv(`./public${caminho}${nome}`, function(err){
    if (err) {
        return res.send(err)
    }
});

Your code sends response back from res.json(candy); while running synchronously, but when asynchronous callback is fired for, You are getting err and ` return res.send(err)

Solution

try this code

async store(req, res)
{
try {
    let doce = req.body.doce;
    let nome = uniqid(doce+'-')+'.jpg';
    let caminho = `/img/${doce}/`;
    let tema = req.body.tema;
    let sampleFile = req.files.arquivo;
    await sampleFile.mv(`./public${caminho}${nome}`)
    const candy = await Candy.create({
            nome: nome,
            doce: doce,
            caminho: caminho,
            tema: tema
        });

        return res.json(candy);
    });
}catch (err) {
    return res.send(err)
}}

Answer 2

An error occures while executing sampleFile . Other parts of code need to wait until sampleFile has finished. So you have two errors: "errno":-2,"code":"ENOENT","syscall":"open","path":"./public/img/paomel/paomel-q6zynjrg8w45y.jpg" (because it cannot find a file) and the second one Cannot set headers after they are sent to the client... (because your code doesn't handle error and follows to the final return res.json(candy); Try:

async store(req, res) {
  let candy= req.body.candy;
  let name= uniqid(doce+'-')+'.jpg';
  let route= `/img/${doce}/`;
  let theme= req.body.theme;
  let sampleFile = req.files.arquivo;
  sampleFile.mv(`./public${route}${name}`, async function(err) {
      if (err) {
        res.send(err)
      } else {
        const candy = await Candy.create({
          name: name,
          candy: candy,
          route: route,
          theme: theme
        });

        res.json(candy);
     }
   });
}

You can also use then , without async and await :

store(req, res) {
  let candy= req.body.candy;
  let name= uniqid(doce+'-')+'.jpg';
  let route= `/img/${doce}/`;
  let theme= req.body.theme;
  let sampleFile = req.files.arquivo;
  sampleFile.mv(`./public${route}${name}`, function(err) {
      if (err) {
        res.send(err)
      } else {

        Candy.create({
          name: name,
          candy: candy,
          route: route,
          theme: theme
        })
        .then(function(candy) {
          res.json(candy);
        })
        .catch(function(err) {
          console.log(err);
        });  
     }
   });
}

Try to use absolute path here /public${route}${name} for file uploading, because fileupload package doesn't use relative paths.