owntracks/frontend

Problems with Access-Control-Allow-Origin

Closed this issue · 3 comments

M-Stenzel commented

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 commented

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 commented

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 commented

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?