traccar back-end and web app client at different servers

Hi,
I'm trying to iframe Traccar in my application.

Basically, i have integrated my application users with traccar users and then iframed traccar inside one of my views.

Recently it stopped working with the following errors on the iframe view (it was working before):

Uncaught DOMException: Blocked a frame with origin "https://traccar.mydomain.com" from accessing a cross-origin frame.
    at <anonymous>:1:16

ncaught DOMException: Blocked a frame with origin "https://traccar.mydomain.com" from accessing a cross-origin frame.
    at new Browser (https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js:22:113438)
    at https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js:22:115031
    at https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js:22:115161
Browser @ ext-all.js:22
(anonymous) @ ext-all.js:22
(anonymous) @ ext-all.js:22

My traccar installation is in one server and my application at another.

Yesterday, after trying a lot of things without any success, i have decided to split traccar front-end from the back-end, and put traccar front-end resources inside my application public directory.

Basically, now i have this setup:

Server 1 (traccar.mydomain.com)

• with traccar default installation (under SSL)

Server 2 (app.mydomain.com)

• with traccar web directory inside my application's public/traccar

In my traccar server, i have set under /opt/traccar/confing/default.xml this configuration:

<entry key='web.origin'>*</entry>

For testing proposes i'm iframing the debug.html

On the extjs, i have changed the callback onLaunch callback for this:

    onLaunch: function () {
        Ext.Ajax.request({
            scope: this,
            url: 'https://traccar.mydomain.com/' + 'api/server',
            // url: 'api/server',
                
            callback: this.onServerReturn
        });
    },

Now, i'm getting the following error:

Failed to load https://traccar.mydomain.com/api/server?_dc=1509120558869: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

RESPONSE HEADERS:

    HTTP/1.1 200 OK
    Date: Fri, 27 Oct 2017 16:09:25 GMT
    Server: Jetty(9.2.22.v20170606)
    Content-Type: application/vnd.sun.wadl+xml
    Allow: HEAD,GET,OPTIONS,PUT
    Last-Modified: Fri, 27 Oct 2017 16:09:25 GMT
    Access-Control-Allow-Headers: origin, content-type, accept, authorization
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
    Access-Control-Allow-Origin: *
    Content-Length: 861
    Keep-Alive: timeout=5, max=100
    Connection: Keep-Alive

REQUEST HEADERS:

    Accept:*/*
    Accept-Encoding:gzip, deflate, br
    Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
    Access-Control-Request-Headers:x-requested-with
    Access-Control-Request-Method:GET
    Connection:keep-alive
    Host:traccar.mydomain.com
    Origin:https://app.mydomain.com
    Referer:https://app.mydomain.com/traccar/debug.html
    Save-Data:on
    User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

What am i missing in this last scenario? && Is even possible this 'workaround'?
There is way to fix my first issue?

Cheers,
Kraemer.

What I would recommend to do is keep Traccar together. Then proxy it from the web server where you run your web app. Then use the proxies version in the iframe.