feat: npm install nextjs-cors weil

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.

.gitignore

@@ -26,3 +26,4 @@ trace
 
 # Ignore specific Next.js build files
 pages-manifest.json
+nodeMap für 13 am 16.07.2024.zip

components/MapComponent.js

@@ -1885,7 +1885,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       })
       .then((data) => {
         const newLinePositions = data.map((item) => {
+          console.log("item.idLD", item.idLD);
+          console.log("item.idModul", item.idModul);
+
           if (item.points && Array.isArray(item.points)) {
+            //console.log("item.points in MapComponent", item.points);
             return {
               coordinates: item.points.map((point) => [point.x, point.y]),
               idModul: item.idModul,
@@ -1915,6 +1919,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         const response1 = await fetch(webserviceGisLinesStatusUrl);
         const data1 = await response1.json();
         const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+        /*   const response2 = await fetch(
+          "http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=10&u=484"
+        ); */
         const data2 = await response2.json();
 
         const colorsByModule = {};
@@ -2100,7 +2107,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           this.bindContextMenu({
             contextmenuItems: [
               {
-                text: "Marker entfernen",
+                text: "Stützpunkt entfernen",
                 callback: () => {
                   const newCoords = marker.getLatLng();
                   const newCoordinates = [...lineData.coordinates];
@@ -2128,7 +2135,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         contextmenu: true,
         contextmenuItems: [
           {
-            text: "Marker hier hinzufügen",
+            text: "Stützpunkt hinzufügen",
             callback: (e) => {
               if (tempMarker) {
                 tempMarker.remove(); // Entfernen des Platzhalter-Icons

config/config.js

@@ -4,7 +4,8 @@
 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 = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden
+const serverURL = "http://10.10.0.70";
 console.log("serverURL in config:", serverURL);
 // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
 let windowHeight, url_string, url, idMap, idUser;
@@ -41,6 +42,9 @@ if (typeof window !== "undefined") {
   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}`;
 
@@ -78,3 +82,9 @@ 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

@@ -28,3 +28,9 @@ export const MAP_DATA_ICON_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.
 export const WEBSERVICE_GIS_LINES_STATUS_URL =
   "http://localhost:3000/api/linesColorApi";
  */
+
+/*
+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.
+ */

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "nodeMap 12.07.2024",
+  "name": "nodeMap",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -15,6 +15,7 @@
         "mysql": "^2.18.1",
         "mysql2": "^3.10.1",
         "next": "^14.2.3",
+        "nextjs-cors": "^2.2.0",
         "overlapping-marker-spiderfier-leaflet": "^0.2.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -4244,6 +4245,18 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -8120,6 +8133,17 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-cors": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nextjs-cors/-/nextjs-cors-2.2.0.tgz",
+      "integrity": "sha512-FZu/A+L59J4POJNqwXYyCPDvsLDeu5HjSBvytzS6lsrJeDz5cmnH45zV+VoNic0hjaeER9xGaiIjZIWzEHnxQg==",
+      "dependencies": {
+        "cors": "^2.8.5"
+      },
+      "peerDependencies": {
+        "next": "^8.1.1-canary.54 || ^9.0.0 || ^10.0.0-0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0"
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -8172,7 +8196,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }

package.json

@@ -10,6 +10,7 @@
     "mysql": "^2.18.1",
     "mysql2": "^3.10.1",
     "next": "^14.2.3",
+    "nextjs-cors": "^2.2.0",
     "overlapping-marker-spiderfier-leaflet": "^0.2.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

pages/api/linesColorApi.js

@@ -2,7 +2,18 @@
 // http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict
 //In DB gis_lines idLD und idModul anpassen entsprechend
 
-export default function handler(req, res) {
+// /pages/api/linesColorApi.js
+import NextCors from "nextjs-cors";
+
+export default async function handler(req, res) {
+  // Run the cors middleware
+  await NextCors(req, res, {
+    // Options
+    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
+    origin: "*", // Erlauben Sie alle Ursprünge, oder geben Sie spezifische Ursprünge an
+    optionsSuccessStatus: 200, // Legacy-Browser-Unterstützung für 204
+  });
+
   const response = {
     Name: "Liste aller Statis der Linien",
     Zeitstempel: new Date().toISOString(), // Aktuellen Zeitstempel hinzufügen