DHTMLX 5.1 - DHTMLXForm Image control and CORS

Hey,

I’m developing a frontend in Angular that gets the data form a rest api (other server/port) and i found a problem regarding the Image control.
No problem when getting the image, but when uploading a new image the response data ends in a iframe that is impossible to access due to CORS if the upload URL is not same host/port.

The error is

 ERROR DOMException: Blocked a frame with origin "http://192.168.2.80:4200" from accessing a cross-origin frame.
    at Object.doOnUpload (http://192.168.2.80:4200/assets/js/dhtmlx.js:56359:46)
    at HTMLIFrameElement.c.childNodes.(anonymous function).onload (http://192.168.2.80:4200/assets/js/dhtmlx.js:56307:19)
    at HTMLIFrameElement.wrapFn [as __zone_symbol___onload] (http://192.168.2.80:4200/polyfills.bundle.js:1071:39)
    at ZoneDelegate.webpackJsonp.1041.ZoneDelegate.invokeTask (http://192.168.2.80:4200/polyfills.bundle.js:440:31)
    at Object.onInvokeTask (http://192.168.2.80:4200/vendor.bundle.js:4499:37)
    at ZoneDelegate.webpackJsonp.1041.ZoneDelegate.invokeTask (http://192.168.2.80:4200/polyfills.bundle.js:439:36)
    at Zone.webpackJsonp.1041.Zone.runTask (http://192.168.2.80:4200/polyfills.bundle.js:207:47)
    at HTMLIFrameElement.ZoneTask.invoke (http://192.168.2.80:4200/polyfills.bundle.js:502:38)

How can i avoid this?
I have read about ‘postMessage’, a method to transfer data across different domains, but it needs to modify the dhtmlx.js and i’m not sure how to proceed.

Hi? Any response for this? How do you get the image with the image control if its not in the same server???

At least tell me it won’t work with CORS or something.

generated dhtmlx components behave simlar to the simple html-structures so if the CORS is configured correctly on your server it will work well for the dhtmlx components.

Hi, thanks for your response.

It work well for all components but image, the CORS is configured correctly (99% sure) on the server and i didnt have any other problems.

The server side is a simply nodejs rest api with Express and the first thing i do is

var cors=require('cors');
app.use(cors());

If i remove this nothing works due to cors.

The function for the upload:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/img')
  },
  filename: function (req, file, cb) {
  	var parts = file.originalname.split('.');
  	var ext = parts[parts.length-1];
  	var id = req.query.id;
  	var num = 0;
  	var filepath = 'uploads/img/' + id + '_' + num + '.' + ext;
  	while (!utils.existeixArxiu(filepath)) {
  		num += 1;
  		filepath = 'uploads/img/' + id + '_' + num + '.' + ext;
  	}
    cb(null, id + '_' + num + '.' + ext)
  }
})

var upload = multer({ storage: storage });

// upload

router.post('/img', upload.single('file'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
  var file = req.file;
  var id = req.query.id;
  if (!file || !id) {
      	var myobj = {
		    state: false,                // true if the file uploaded successfuly
		    itemId: 'user_photo1',       // item name
		    itemValue: 'item_value1',    // value to set via setItemValue() after upload
		    extra: file,     // optional data for uploading ok/fail events
		    body: req.body,
		    query: req.query
		}
		res.json(myobj);
    }
	else {
    	// Everything went fine
		var myobj = {
		    state: true,                // true if the file uploaded successfuly
		    itemId: 'id:'+id,       // item name
		    itemValue: 'item_value2',    // value to set via setItemValue() after upload
		    extra: file,     // optional data for uploading ok/fail events
		    body: req.body,
		    query: req.query
		}
		res.json(myobj);
	}
});

Im not even uploading, just plain response to test it works. The component gets stuck with
Blocked a frame with origin “http://192.168.2.80:4200” from accessing a cross-origin frame.
at Object.doOnUpload

I use all the dhtmlx components without problems (dhtmlxgrid load), but i didnt used the form submit feature, i get the data when the user press save and send it to the server with promise.

Please any help will be really appreciated.