DHTMLX 5.1 - DHTMLXForm Image control and CORS

Suite and Optimus Suite 5
#1

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.

#2

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

#3

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

#4

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.

#5

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.