Verbessere die Axios-Konfiguration: Setze die Basis-URL dynamisch basierend auf der Umgebung und verhindere Mixed-Content-Probleme durch Umstellung auf HTTPS. Aktualisiere die Menü-Datenabfrage, um Axios für den API-Zugriff zu verwenden und füge Fehlerbehandlung hinzu.

src/axios.js

@@ -2,8 +2,20 @@ import axios from 'axios';
 import store from './store';
 import router from './router';
 
-axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL;
-console.log(process.env.VUE_APP_BACKEND_URL);
+// Basis-URL für das Backend ermitteln
+let baseURL = process.env.VUE_APP_BACKEND_URL || '/api';
+
+// Mixed-Content vermeiden: wenn die Seite über HTTPS läuft,
+// aber die Konfiguration "http://" verwendet, auf "https://" umschalten.
+if (typeof window !== 'undefined') {
+  const isHttps = window.location.protocol === 'https:';
+  if (isHttps && baseURL.startsWith('http://')) {
+    baseURL = baseURL.replace(/^http:/, 'https:');
+  }
+}
+
+axios.defaults.baseURL = baseURL;
+console.log('Axios baseURL:', baseURL);
 
 axios.interceptors.request.use(
   config => {

src/main.js

@@ -5,15 +5,19 @@ import store from './store';
 import axios from './axios';
 import './assets/css/editor.css';
 
+// Menü-Daten über das konfigurierte Axios-Backend laden
 async function fetchMenuData() {
-  const backendUrl = process.env.VUE_APP_BACKEND_URL || '';
-  const response = await fetch(backendUrl + '/menu-data');
-  return await response.json();
+  const response = await axios.get('/menu-data');
+  return response.data;
 }
 
-fetchMenuData().then(menuData => {
-  store.commit('setMenuData', menuData);
-});
+fetchMenuData()
+  .then(menuData => {
+    store.commit('setMenuData', menuData);
+  })
+  .catch(err => {
+    console.error('Fehler beim Laden der Menü-Daten:', err);
+  });
 
 const app = createApp(AppComponent);
 app.use(router);