Firebase Cloud Function Error: "Cannot set headers after they are sent to the client"

Question

I am new to firebase cloud functions and NodeJS, in general. I am trying to use Cloudinary's NodeJS SDK to rename an image as shown here:

https://cloudinary.com/documentation/image_upload_api_reference#rename_method

I am using Firebase Cloud Function to handle the backend for this, but I am getting the following server log error when running the https function:

>  node:_http_outgoing:579
>      throw new ERR_HTTP_HEADERS_SENT('set');
>      ^
> 
>  Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
>      at new NodeError (node:internal/errors:329:5)
>      at ServerResponse.setHeader (node:_http_outgoing:579:11)
>      at ServerResponse.header (C:\Users\XXX\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\express\lib\response.js:771:10)
>      at ServerResponse.json (C:\Users\XXX\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\express\lib\response.js:264:10)
>      at ServerResponse.send (C:\Users\XXX\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\express\lib\response.js:158:21)
>      at C:\Users\XXX\Desktop\work\XXX\functions\build\cloudinary\rename.js:37:27
>      at C:\Users\nXXX\Desktop\work\Xxxx\functions\node_modules\cloudinary\lib\utils\index.js:1239:14
>      at IncomingMessage.<anonymous> (C:\Users\XXX\Desktop\work\xxx\functions\node_modules\cloudinary\lib\uploader.js:505:9)
>      at IncomingMessage.emit (node:events:381:22)
>      at endReadableNT (node:internal/streams/readable:1307:12) {
>    code: 'ERR_HTTP_HEADERS_SENT'
>  }

My cloud function is functions/src/cloudinary/rename.js:

import cloudinary from 'cloudinary'
import * as functions from 'firebase-functions'

const cors = require('cors')({ origin: true }) // Automatically allow cross-origin requests for browser fetch

cloudinary.config({
  cloud_name: 'removed',
  api_key: 'removed',
  api_secret: 'removed'
})

export const rename = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    try {
      cloudinary.v2.uploader.rename(
        'aircraft_hzwme2',
        'updated_name',
        (error, result) => {
          if (error) {
            res.status(500).send(error)
          } else {
            res.send(result)
          }
        }
      )
      return res.send('hi from rename function')
    } catch (error) {
      return res.status(500).send('There was an error in rename function')
    }
  }) // end cors wrapper
})

Anyone have any idea what I am doing wrong to cause this error?

Answer 1

I prefer adding return while returning sending back response so no code is executed after that (unless your use-case requires to) hence preventing any additional attempts to send response. In this case you have an additional res.send() statement after your if-else block. Try refactoring like this:

try {
  cloudinary.v2.uploader.rename(
    'aircraft_hzwme2',
    'updated_name',
    (error, result) => {
      if (error) {
        return  res.status(500).send(error) // <-- add return
      } else {
        return res.send(result) // <-- add return
      }
    })
    // Remove this
    // return res.send('hi from rename function')
} catch (error) {
  return res.status(500).send('There was an error in rename function')
}