Nginx Node JS: How To Fix "File Upload 502 Cors Error"?

Question

This is weird, I am able to access all of the endpoints except the file upload. It works fine in my local server, but not in the production server.

So I am using Angular Http Client to upload the file:

  async uploadSingle(event) {
    this.file = event.target.files[0];
    const compressedFile = new File(
      [(await this.resizeImage({ maxSize: 1080, file: this.file })) as Blob],
      this.file.name
    );
    const res = (await this.http.uploadFile<HttpResponse<IUploadResponse>>(
      this.uploadUrl + '?noteId=' + this.selectedNote?.id,
      compressedFile,
      (prog: number) => {
        this.progressBar = prog;
      }
    )) as HttpResponse<IUploadResponse>;
    if (res.body?.error) {
      this.notification.errorNotification(res.body.error);
    } else {
      this.value = res.body.path;
      this.valueChange.emit(this.value);
      this.notification.successNotification(this.str('fileUploadSuccess'));
    }
    this.progressBar = undefined;
  }

  async uploadFile<T>(
    url: string,
    file: File,
    progress?: (prog: number) => void
  ) {
    try {
      if (file) {
        const form = new FormData();
        form.append('file', file, file.name);

        const res = await this.http
          .post<T>(this.getUrl(url), form, {
            headers: {
              Authorization: 'Bearer ' + this.auth?.loginToken,
            },
            reportProgress: true,
            observe: 'events',
          })
          .pipe(
            tap((event: any) => {
              if (event.type === HttpEventType.UploadProgress) {
                const prog = Math.round((event.loaded / event.total) * 100);
                if (progress) {
                  progress(prog);
                }
              }
            }),
            catchError(this.catchError.bind(this))
          )
          .toPromise();
        return res;
      }
    } catch (err) {
      this.notification.errorNotification(err);
    }
  }

Here is my NodeJS server config:

import express from "express";
require("custom-env").env(process.env.NODE_ENV ?? "production");

console.log(`NODE_ENV = ${process.env.NODE_ENV}`);

const { app } = require("./dist/app/server/main");
export const baseServer = express();
const PORT = process.env.PORT;
const bodyParser = require('body-parser');            

baseServer.use(express.json());
baseServer.use(bodyParser.json({limit:'50mb'})); 
baseServer.use(bodyParser.urlencoded({extended:true, limit:'50mb'})); 

export const fs = require("fs");
export const parser = require("xml2js");

//Cors
const cors = require("cors");
baseServer.use(cors());

The cors is set to be able to handle all request from everywhere.

This is the File Upload Route:

var multer = require("multer");
var ftpStorage = require("multer-ftp");
const upload = multer();

const storage = new ftpStorage({
  ftp: {
    host: process.env.FTP_URL,
    secure: true, // enables FTPS/FTP with TLS
    user: process.env.FTP_USERNAME,
    password: process.env.FTP_PASSWORD,
  },
  destination: function (req: Request, file: any, options: any, callback: any) {
    callback(
      null,
      process.env.FTP_UPLOAD_PATH +
        generateUUIDString() +
        generateUUIDString() +
        "-" +
        Date.now() +
        "." +
        file.originalname.split("/").pop()
    ); // custom file destination, file extension is added to the end of the path
  },
});

const uploadToFTP = multer({ storage: storage }).single("file");

baseServer.post(
  "/api/upload-note-image",
  registeredUser,
  function (req: Request, res: Response, next: NextFunction) {
    const noteId = req.query.noteId as string;
    const userId = res.locals.user.id;
    uploadToFTP(req, res, async function (err: any) {
      if (err) {
        console.log(err);
        res.json({ error: err });
      } else {
        const url =
          (process.env.IMG_URL ?? "") +
          (res.req as any).file.path.split("/").pop();

        // Save note images to DB
        await db.noteImages.create({
          data: {
            url,
            noteId,
            userId,
            ftpUrl: url.split("/").pop() ? process.env.FTP_UPLOAD_PATH! + url.split("/").pop() : "",
          },
        });

        res.json({
          success: true,
          path: url,
        });
      }
    });
  }
);

And this is the error I got from my client device:

What is the cause and how to fix this upload file cors error 502?

Answer 1

In the main Node JS code try adding this snippet and check:

baseServer.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, Authorization');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
    next();
});

and remove the last 2 line i.e.

//Cors
const cors = require("cors");
baseServer.use(cors());