Fixing UEditor Multi-Image Upload Cross-Origin Errors

In a front-end/back-end separated legacy project, UEditor multi-image upload threw CORS errors. With CORS handled on the backend, switching to jQuery Ajax to post FormData succeeded.

UEditor is an old editor, no longer maintained and not recommended. But a legacy front-end/back-end separated project used it, with CORS already handled on the upload API. After configuring the upload path, testing in the console threw a cross-origin error.

UEditor upload CORS error

Inspecting the upload code, the actual request went through webuploader.js. Various front/back-end tweaks found online failed. On a whim I tried jQuery Ajax — jQuery was already included — rewriting it as:

$.ajax({
  url: server,
  dataType: 'json',
  type: opts.method,
  async: false,
  data: formData,
  xhr: function(){ return xhr; },
  processData: false,
  contentType: false,
  success: function(data){ console.log(data); },
  error: function(response){ console.log(response); }
});

It worked at once — so the backend CORS setup was fine all along.