From d134f1f315bd93d7efc0551c1f0645a41aa3629f Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Dec 2024 15:39:06 +0100 Subject: [PATCH] Error: apiService.js:180 Fehler beim Abrufen der Benutzerrechte WIP: Es soll die Seiten auf DNS-Name erreichbar sein --- .env.local | 4 +- config/config.js | 83 +++++++++++++----------------------- config/urls.js | 33 +++++++++++++- pages/api/[...path].js | 4 +- services/apiService.js | 21 ++++++--- utils/createAndSetDevices.js | 3 +- utils/openInNewTab.js | 3 +- 7 files changed, 84 insertions(+), 67 deletions(-) diff --git a/.env.local b/.env.local index 3b762466f..36eec4b9a 100644 --- a/.env.local +++ b/.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_PROXY_TARGET="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_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" ######################### diff --git a/config/config.js b/config/config.js index f6ea0a555..533aa0c10 100644 --- a/config/config.js +++ b/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 - windowHeight = window.innerHeight; // Die Höhe des Browserfensters - url_string = window.location.href; // Die vollständige URL als String - url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben - console.log("%c 2- URL in config:", "color: #006400; font-size: 16px; background-color: #f0f0f0;", url); + // Initialisierung der Browser-spezifischen Variablen + windowHeight = window.innerHeight; + url_string = window.location.href; + url = new URL(url_string); - console.log("%c 3- URL origin in config:", "color: #006400;", url.origin); //http://localhost:3000 - 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("%c Aktuelle URL:", "color: #006400;", url); - console.log(`4- Parameter 'idMap' : ${idMap}`); - console.log(`5- Parameter 'idUser': ${idUser}`); + // Extrahiere URL-Parameter + 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 - //http://localhost:3000/?m=10&u=485 + console.log(`Parameter 'idMap': ${idMap}`); + console.log(`Parameter 'idUser': ${idUser}`); - //-----------------Von WebService------------------------------------------------ - mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`; //idMap: 10, idUser: 484 + // Konstruktion der URLs basierend auf den Server- und URL-Parametern + 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. - */ diff --git a/config/urls.js b/config/urls.js index 207d02eff..d7370cbbf 100644 --- a/config/urls.js +++ b/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 diff --git a/pages/api/[...path].js b/pages/api/[...path].js index b270661b1..f62638598 100644 --- a/pages/api/[...path].js +++ b/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 diff --git a/services/apiService.js b/services/apiService.js index 930a9565f..ec4686677 100644 --- a/services/apiService.js +++ b/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", diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index 7014c7dd8..63e9b9ad8 100644 --- a/utils/createAndSetDevices.js +++ b/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])); diff --git a/utils/openInNewTab.js b/utils/openInNewTab.js index 51d0f667b..84518473d 100644 --- a/utils/openInNewTab.js +++ b/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