Error: apiService.js:180 Fehler beim Abrufen der Benutzerrechte

WIP: Es soll die Seiten auf DNS-Name erreichbar sein

.env.local

@@ -24,8 +24,8 @@ DB_PORT=3306
 #########################
 #device nur Verlinkung wenn die gleiche DB ist
 NEXT_PUBLIC_BASE_URL="http://10.10.0.70/talas5/devices/" 
-NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
+#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
+#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
 #########################
 

config/config.js

@@ -1,73 +1,54 @@
 // /config/config.js
 import * as urls from "../config/urls.js";
+
 // Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
 const mapVersion = "0.5.3"; // Die Version der verwendeten Karte
 const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird
 const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird
-//const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden
-//const serverURL = "http://10.10.0.13";
-//const serverURL = "http://10.10.0.70";
-const serverURL = process.env.NEXT_PUBLIC_SERVER_URL;
-if (!serverURL) {
-  throw new Error("Die Umgebungsvariable NEXT_PUBLIC_SERVER_URL ist nicht gesetzt!");
-}
-console.log("%c 1- serverURL in config:", "color: #006400;", serverURL);
 
-// Initialisieren von Variablen, die später im Browserkontext gesetzt werden
+// Dynamische Bestimmung der Server-URL basierend auf window.location.origin ohne Port
+let serverURL;
+
+if (typeof window !== "undefined") {
+  const url = new URL(window.location.origin);
+  serverURL = `${url.protocol}//${url.hostname}`; // Nur Protokoll und Hostname, ohne Port
+} else {
+  throw new Error("ServerURL kann nicht bestimmt werden, da der Code nicht im Browser läuft!");
+}
+
+console.log("%c ServerURL (dynamisch ermittelt):", "color: #006400;", serverURL);
+
+// Initialisieren von Variablen
 let windowHeight, url_string, url, idMap, idUser;
-//Online Daten
+// URLs für Online-Daten
 let mapGisStationsStaticDistrictUrl, mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, mapDataIconUrl, webserviceGisLinesStatusUrl;
 
-// Prüfen, ob das Code im Browser ausgeführt wird
+// Prüfen, ob der Code im Browser ausgeführt wird
 if (typeof window !== "undefined") {
-  // Diese Variablen werden nur im Browser-Kontext initialisiert
+  // Initialisierung der Browser-spezifischen Variablen
-  windowHeight = window.innerHeight; // Die Höhe des Browserfensters
+  windowHeight = window.innerHeight;
-  url_string = window.location.href; // Die vollständige URL als String
+  url_string = window.location.href;
-  url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben
+  url = new URL(url_string);
-  console.log("%c 2- URL in config:", "color: #006400; font-size: 16px; background-color: #f0f0f0;", url);
 
-  console.log("%c 3- URL origin in config:", "color: #006400;", url.origin); //http://localhost:3000
+  console.log("%c Aktuelle URL:", "color: #006400;", url);
-  idMap = url.searchParams.get("m"); // Ein Parameter aus der URL, Standardwert ist '10'
-  idUser = url.searchParams.get("u"); // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card'
 
-  console.log(`4- Parameter 'idMap' : ${idMap}`);
+  // Extrahiere URL-Parameter
-  console.log(`5- Parameter 'idUser': ${idUser}`);
+  idMap = url.searchParams.get("m"); // Parameter 'm' (idMap)
+  idUser = url.searchParams.get("u"); // Parameter 'u' (idUser)
 
-  // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
+  console.log(`Parameter 'idMap': ${idMap}`);
-  //http://localhost:3000/?m=10&u=485
+  console.log(`Parameter 'idUser': ${idUser}`);
 
-  //-----------------Von WebService------------------------------------------------
+  // Konstruktion der URLs basierend auf den Server- und URL-Parametern
-  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`; //idMap: 10, idUser: 484
+  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${idMap}`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
   mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
-
-  //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
-  //webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
-  //webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
-  //webserviceGisLinesStatusUrl = `${"serverURL"}:3000/api/linesColorApi`;
-  // webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
-  //webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
   webserviceGisLinesStatusUrl = `${serverURL}/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
-
-  //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484
-
-  /*   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
-  mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
-  mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
-  mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
-
-  /*  mapGisStationsStaticDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
-  mapGisStationsStatusDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`;
-  mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsMeasurements?idMap=${idMap}`;
-  mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/gisStationsMeasurementsSQL?idMap=${idMap}`;
-  mapGisSystemStaticUrl = `${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
-  mapDataIconUrl = `${serverURL}/api/talas5/webserviceMap/GetIconsStatic`; */
 }
 
-// Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können
+// Export der definierten Variablen und URLs
 export {
   mapVersion,
   standardSideMenu,
@@ -85,9 +66,3 @@ export {
   mapDataIconUrl,
   webserviceGisLinesStatusUrl,
 };
-
-/*
-Access to fetch at 'http://localhost:3000/api/linesColorApi' from origin 'http://10.10.0.13:3000' 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.
- */

config/urls.js

@@ -1,9 +1,38 @@
 // /config/urls.js
 
-export const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; //Station in Tab öffnen
+// Dynamische Bestimmung der URLs basierend auf window.location.origin ohne Port
+let BASE_URL, SERVER_URL, PROXY_TARGET, ONLINE_TILE_LAYER, OFFLINE_TILE_LAYER, MAP_TILES_LAYER;
+
+if (typeof window !== "undefined") {
+  // Client-seitige Logik
+  const url = new URL(window.location.origin);
+  const originWithoutPort = `${url.protocol}//${url.hostname}`; // Protokoll und Hostname, ohne Port
+
+  BASE_URL = `${originWithoutPort}/api`; // Dynamische Basis-URL
+  SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
+  PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy
+  ONLINE_TILE_LAYER = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;
+  OFFLINE_TILE_LAYER = `${originWithoutPort}:3000/mapTiles/{z}/{x}/{y}.png`;
+  MAP_TILES_LAYER = ONLINE_TILE_LAYER; // Standardwert
+} else {
+  // Server-seitige Logik (Fallback)
+  const originWithoutPort = "http://fallback-url.com"; // Ersetze dies durch die gewünschte Fallback-URL
+
+  BASE_URL = `${originWithoutPort}/api`;
+  SERVER_URL = originWithoutPort;
+  PROXY_TARGET = `${originWithoutPort}:3000`;
+  ONLINE_TILE_LAYER = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;
+  OFFLINE_TILE_LAYER = `${originWithoutPort}:3000/mapTiles/{z}/{x}/{y}.png`;
+  MAP_TILES_LAYER = ONLINE_TILE_LAYER; // Standardwert
+}
+
+// Export der dynamischen Werte
+export { BASE_URL, SERVER_URL, PROXY_TARGET, ONLINE_TILE_LAYER, OFFLINE_TILE_LAYER, MAP_TILES_LAYER };
+
+/* export const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; //Station in Tab öffnen
 export const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL; //Die Konstante ist in  MapComponent.js und useLineData.js  verwendet
 export const PROXY_TARGET = process.env.NEXT_PUBLIC_PROXY_TARGET; // damit nodejs auf Port 3000 auf dem Server Talas5 auf Port 80 aufgerufen kann, ansonsten gibt CORS Fehler
-export const ONLINE_TILE_LAYER = process.env.NEXT_PUBLIC_ONLINE_TILE_LAYER; //Map von Talas_v5 Server
+export const ONLINE_TILE_LAYER = process.env.NEXT_PUBLIC_ONLINE_TILE_LAYER; //Map von Talas_v5 Server */
 //-----------------------------------
 //export const ONLINE_TILE_LAYER = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
 // export const PROXY_TARGET = "http://10.10.0.70"; // damit nodejs auf Port 3000 auf dem Server Talas5 auf Port 80 aufgerufen kann, ansonsten gibt CORS Fehler

pages/api/[...path].js

@@ -1,13 +1,13 @@
 // pages/api/[...path].js
 import { createProxyMiddleware } from "http-proxy-middleware";
-//import { SERVER_URL } from "../config/urls.js";
+import { SERVER_URL } from "../../config/urls.js";
 //console.log("SERVER_URL:", SERVER_URL); // Debug-Ausgabe
 
 export default createProxyMiddleware({
   //target: "http://192.168.10.58:3001",
   // Stationen bekommen
   //target: "http://10.10.0.13", // Ziel-URL des Proxys // API Aufruf zum mapGisStationsStaticDistrictUrl, mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl und mapDataIconUrl
-  target: `${process.env.NEXT_PUBLIC_SERVER_URL}`, //
+  target: `${SERVER_URL}`, //
   //target: urls.PROXY_TARGET,
   //target: "http://localhost:3000", // Ziel-URL des Proxys
   //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys

services/apiService.js

@@ -1,6 +1,8 @@
 // services/apiService.js
 import * as config from "../config/config";
-import * as urls from "../config/urls";
+import SERVER_URL from "../config/urls";
+const url = new URL(window.location.origin);
+const originWithoutPort = `${url.protocol}//${url.hostname}`;
 
 let timeoutId;
 
@@ -21,19 +23,22 @@ const fetchWithTimeout = async (url, options, timeout = 5000) => {
   }
 };
 
-export const fetchGisStatusStations = async (idMap, idUser) => {
+export const fetchGisStatusStations = async () => {
+  //idMap und idUser von URL Parameter hersuslesen
+  const idMap = url.searchParams.get("m");
+  const idUser = url.searchParams.get("u");
   // Verhindere wiederholte schnelle API-Aufrufe durch Debouncing
   if (timeoutId) {
     clearTimeout(timeoutId);
   }
 
   timeoutId = setTimeout(async () => {
-    const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
+    //const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
 
     try {
       // Verwende das Timeout für die API-Anfrage
       const response = await fetchWithTimeout(
-        `${SERVER_URL}/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`,
+        `${originWithoutPort}/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`,
         {
           method: "GET",
           headers: {
@@ -136,6 +141,9 @@ export const fetchDeviceNameById = async (idLD) => {
 // ----------------------------------------------
 // services/apiService.js
 export const fetchUserRights = async () => {
+  //idMap und idUser von URL Parameter hersuslesen
+  const idMap = url.searchParams.get("m");
+  const idUser = url.searchParams.get("u");
   // Zähler für API-Aufrufe in localStorage speichern
   let userRightsRequestCount = localStorage.getItem("userRightsRequestCount") || 0;
   userRightsRequestCount++;
@@ -143,7 +151,10 @@ export const fetchUserRights = async () => {
   console.log(`fetchUserRights wurde ${userRightsRequestCount} Mal aufgerufen.`);
 
   try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${config.idMap}&idUser=${config.idUser}`, {
+    console.log("originWithoutPort in fetchUserRights", originWithoutPort);
+    console.log("idMap in fetchUserRights", idMap);
+    console.log("idUser in fetchUserRights", idUser);
+    const response = await fetch(`${originWithoutPort}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`, {
       method: "GET",
       headers: {
         Connection: "close",

utils/createAndSetDevices.js

@@ -7,6 +7,7 @@ import { toast } from "react-toastify";
 import * as config from "../config/config.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
 import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
+import { SERVER_URL } from "../config/urls.js";
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
@@ -31,7 +32,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
     const jsonResponse = await response1.json();
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
     const statusResponse = await response2.json();
-    const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+    const BASE_URL = SERVER_URL;
 
     const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
 

utils/openInNewTab.js

@@ -1,7 +1,8 @@
 // utils/openInNewTab.js
 
+import SERVER_URL from "../config/urls";
 export function openInNewTab(e, target) {
-  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+  const BASE_URL = SERVER_URL;
   let link;
 
   // Prüfen, ob der Kontextmenü-Eintrag aufgerufen wird, ohne dass ein Marker oder Polyline direkt angesprochen wird