Problems with Access-Control-Allow-Origin

[M-Stenzel]

Hi team, I try to setup the owntracks frontend, but have some issues with that.

I compiled the frontend and moved the "/dist" directory to /srv/www/htdocs. In the MS Edge browser a map does not load, instead I get this error message in the console:

owntracks/:1  Access to fetch at 'https://owntracks.server.de/owntracks/api/0/list' from origin 'https://www.server.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
owntracks.server.de/owntracks/api/0/list:1 

        Failed to load resource: net::ERR_FAILED
index-BYtbbaCT.js:231  HTTP TypeError: Failed to fetch
    at Da (index-BYtbbaCT.js:278:15344)
    at NA (index-BYtbbaCT.js:278:15655)
    at Te.ZA (index-BYtbbaCT.js:278:18205)
    at Array.<anonymous> (index-BYtbbaCT.js:226:8540)
    at Te.dispatch (index-BYtbbaCT.js:226:4827)
    at Te.dispatch (index-BYtbbaCT.js:226:3883)
    at Te.HA (index-BYtbbaCT.js:278:17800)
    at Array.<anonymous> (index-BYtbbaCT.js:226:8540)
    at Te.dispatch (index-BYtbbaCT.js:226:4827)
    at Te.dispatch (index-BYtbbaCT.js:226:3883)
te @ index-BYtbbaCT.js:231
index-BYtbbaCT.js:278  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'json')
    at NA (index-BYtbbaCT.js:278:15674)

Now I created this config file for the apache web server

<IfModule mod_alias.c>
    Alias /owntracks /srv/www/htdocs/dist
</IfModule>

  <Directory /srv/www/htdocs/dist>
    # Enable CORS headers
    <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
    </IfModule>
  </Directory>

But still the map does not load. Where else can I enable CORS?

Martin

P. S. There are no error messages in the log file

[linusg]

The CORS header needs to be returned from the recorder, not the frontend. See https://stackoverflow.com/a/10636765.

Note that this is a dangerous thing to misconfigure, especially in the context of location data, and as such you should make sure you really understand what you're doing before putting this on the web.

[M-Stenzel]

Ah, very good, that answered my question 👍 . From the documentation it was not so clear to me - since there are several document roots (e. g. apache server). I was a little bit confused, since I use a reverse proxy configuration.

[M-Stenzel]

Not there yet. I set up a reverse proxy, as documented [https://github.com/owntracks/recorder?tab=readme-ov-file#nginx](here https://github.com/owntracks/recorder?tab=readme-ov-file#nginx)

This is my path for the frontend /var/spool/owntracks/recorder/htdocs/dist/

This is my config.js

// Here you can overwite the default configuration values
window.owntracks = window.owntracks || {};
//window.owntracks.config = {};
window.owntracks.config = {
  api: {
    baseUrl: "https://server.de/owntracks/",
  },
  locale: "de-DE",
};

My ot-recorder config file contains this:

OTR_HTTPPREFIX="https://server.de"

The map does not load when visiting

https://server.de/owntracks/dist

Any ideas?