Szene:
Die Front-End- und Back-End-Trennung sowie die lokale Front-End-Entwicklung und die Anrufoberfläche haben Cross-Domänen-Probleme. Es gibt im Allgemeinen drei Lösungen:
1. Verpacken Sie die Backend -Schnittstelle, um lokal auszuführen (Nachteile: Jedes Mal, wenn das Backend -Update aktualisiert wird, müssen Sie zum nächsten Update -Paket für den Testserver gehen, und Sie müssen auch eine Java -Auslaufumgebung lokal erstellen, was problematisch ist)
2. CORS Cross-Domain: Wenn die Backend-Schnittstelle zurückkehrt, fügen Sie "Zugriffskontroll-Owl-Origin":* zum Kopfzeile (manchmal ist das Backend unpraktisch, und das Frontend wird schmerzhaft sein)
3.. Verwenden Sie NodeJs, um einen lokalen HTTP-Server zu erstellen und ihn beim Zugriff auf die Benutzeroberflächen-URL zu leiten. Lösen Sie das Cross-Domain-Problem während der lokalen Entwicklung perfekt.
Verwendete Techniken:
1. Erstellen Sie einen lokalen HTTP -Server mit NodeJs
2. Anwenden Sie Node-HTTP-Proxy, um URLs der Schnittstelle weiterzuleiten
Spezifische Methoden:
1. Node.js erstellt einen lokalen HTTP -Server. Siehe Shawn.xies "Nodejs Builds einen lokalen HTTP -Server".
2. Node.js wird verwendet, um Node-HTTP-Proxy weiterzuleiten. Das offizielle Dokument ist: https://github.com/nodejitsu/node-http-proxy#using-https
3. Die Betriebsmethode wird verwiesen: http://hao.jser.com/archive/10394/?utm_Source=Tuicool&utm_medium=referral
4. Hier sind meine eigenen praktischen Operationen
Projektvorbereitung
1. NPM -Initialisierung
npm init
2. Installieren Sie das Node-HTTP-Proxy-Modul
NPM Installieren Sie HTTP-Proxy-Save-dev
3. Projektstruktur
Im folgenden Beispiel stellen wir die HTML -Datei direkt in das Stammverzeichnis './' ein oder geben ein Website -Verzeichnis an, das in Proxy.js angepasst werden kann
Konfigurieren Sie den HTTP -Server und die Proxy -Weiterleitung
var port = 3000; var http = required ('http'); var url = require ('url'); var fs = require ('fs'); var mine = require ('./ mine'). Typen; var path = require ('path'); var httpproxy = sCRETPROXY 'var {var {var {); 'http://192.168.10.38:8180/', // Schnittstellenadresse // Die folgenden Einstellungen werden für https verwendet // ssl: {// key: fs.readFilesSync ('server_decrypt.key', 'utf8'), // cert: fs.readFilesSync ('serverSeync (' serverSesine (utf8 ', // sicher: false}); url.parse (request.url) .PathName; // var realpath = path.join ("Hauptseite", Pathname); 'Unbekannt'; // Richten Sie, ob es sich um einen Schnittstellenzugriff handelt, vor (pathname.indexof ("mspj-mall-admin")> 0) {proxy.web (Anfrage, Antwort); return; 'text/plain'}); Antwort.Write ("Diese Anforderung url" + pathname + "wurde auf diesem Server nicht gefunden.") Antwort.end ();} else {fs ContentType = mine [ext] || "text/plain"; Antwort.WriteHead (200, {'Content-Type': contentType}); Antwort.Write (Datei, "binär"); Antwort.end ();});}});}); Server.List (Port);Mine.js
Hier verweisen wir auf den Quellcode von Shawn.xie und fügen ein paar Schriftdateien hinzu.
Exporte.types = {"CSS": "Text/CSS", "GIF": "Image/Gif", "html": "text/html", "ICO": "Image/x-Icon", "JPEG": "Image/JPEG", "JPG": JPEG ":" JPEG "," JS. "application/json","pdf": "application/pdf","png": "image/png","svg": "image/svg+xml","swf": "application/x-shockwave-flash","tiff": "image/tiff","txt": "text/plain","wav": "audio/x-wav","wma": "audio/x-ms-wma","wmv": "video/x-ms-wmv","xml": "text/xml","woff": "application/x-woff","woff2": "application/x-woff2","tff": "application/x-font-truetype","otf": "application/x-font-opentype","eot": "application/vnd.ms-fontObject"};Das obige ist der gesamte Quellcode
Ändern Sie dann die Schnittstellenadresse im Projekt in http: // localhost: 3000/...
Starten Sie den NodeJS -Dienst
Starten Sie CMD, lokalisieren Sie das Projektverzeichnis und führen Sie aus
Node Proxy.js
Zugang:
http: // localhost: 3000/index.html
Sie können sehen, dass die Daten von http: // localhost: 3000/... im Projekt erhalten und dann an die Region weitergeleitet werden.
Auf diese Weise gibt es keine Cross-Domäne.
Das obige ist die Einführung des Editors in Node.js und Node-HTTP-Proxy, um das Cross-Domain-Problem der lokalen Entwicklung AJAX zu lösen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!