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.
2024-07-16 14:30:17 +02:00
parent f59fa74e12
commit de40d9ccb9
7 changed files with 65 additions and 6 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ trace

 # Ignore specific Next.js build files
 pages-manifest.json
+nodeMap für 13 am 16.07.2024.zip
--- a/components/MapComponent.js
+++ b/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
--- a/config/config.js
+++ b/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.
+ */
--- a/config/urls.js
+++ b/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.
+ */
--- a/package-lock.json
+++ b/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"
      }
--- a/package.json
+++ b/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",
--- a/pages/api/linesColorApi.js
+++ b/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