Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen
1. Legen Sie den CORS-Antwortheader fest, um domänenübergreifende Funktionalität zu erreichenRessourcenfreigabe zwischen verschiedenen Ursprüngen (CORS) 1.1 Was ist CORSCORS (Cross-Origin Resource Sharing), gemeinsame Nutzung von Ressourcen zwischen verschiedenen Ursprüngen. CORS ist die offizielle Cross-Domain-Lösung. Ihre Besonderheit besteht darin, dass keine speziellen Vorgänge auf dem Client erforderlich sind und die Verarbeitung vollständig auf dem Server erfolgt. Es unterstützt Get- und Post-Anfragen. Der Cross-Origin Resource Sharing-Standard fügt eine Reihe von HTTP-Headerfeldern hinzu, die es Servern ermöglichen, anzugeben, welche Ursprünge über Browser Zugriff auf welche Ressourcen haben. 1.2 Wie funktioniert CORS?CORS setzt einen Antwortheader, um dem Browser mitzuteilen, dass die Anforderung domänenübergreifend sein darf. Nach Erhalt der Antwort gibt der Browser die Antwort frei. 1.3 Wofür wird CORS verwendet?
ajaxDemo.html
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<Titel>CORS</Titel>
<Stil>
#Ergebnis {
Breite: 200px;
Höhe: 100px;
Rand: durchgezogen 1px #90b;
}
</Stil>
</Kopf>
<Text>
<button>Anfrage senden</button>
<div id="Ergebnis"></div>
<Skript>
const btn = document.querySelector('Schaltfläche');
btn.onclick = Funktion () {
//1. Objekt erstellen const x = new XMLHttpRequest();
//2. Initialisierungseinstellungen x.open("GET", "http://127.0.0.1:8080/cors-server");
//3. Senden x.send();
//4. Ereignis x.onreadystatechange = function () { binden
wenn (x.readyState === 4) {
wenn (x.status >= 200 und x.status < 300) {
document.getElementById('Ergebnis').innerText = x.response;
}
}
}
}
</Skript>
</body>
</html>
server.js
//1. Express importieren
const express = erfordern('express');
//2. Anwendungsobjekt erstellen const app = express();
//3. Routing-Regeln erstellen // request ist die Kapselung der Anfragenachricht // response ist die Kapselung der Antwortnachricht app.all('/cors-server', (request, response)=>{
//Setze den Antwortheader response.setHeader("Access-Control-Allow-Origin", "*"); // Erlaube alle domänenübergreifenden Anfragen*
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // Angegebene Anfragen domänenübergreifend zulassen // response.setHeader("Access-Control-Allow-Headers", '*'); // Benutzerdefinierte Anfrage-Header-Tags zulassen // response.setHeader("Access-Control-Allow-Method", '*'); // Alle Anfragen domänenübergreifend zulassen *
// response.setHeader("Access-Control-Allow-Method", 'get'); // Erlaube domänenübergreifende Get-Anfragen response.send('hello CORS');
});
//4. Abhörport zum Starten des Dienstes app.listen(8080, () => {
console.log("Der Dienst wurde gestartet, Port 8080 lauscht...");
});
Dies ist das Ende dieses Artikels über die domänenübergreifende Ajax-Lösung und das Festlegen des CORS-Antwortheaders zum Erreichen domänenübergreifender Falldetails. Weitere relevante Inhalte zur domänenübergreifenden Ajax-Lösung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster
>>: Virtuelle Maschinen zwischen VMware Workstation und vSphere migrieren (Bild und Text)
Artikel empfehlen
Websocket+Vuex implementiert eine Echtzeit-Chat-Software
Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...
Implementierung eines laufenden Springboot-Projekts mit Docker
Einführung: Die Konfiguration von Docker, auf dem...
Detailliertes Grafik- und Text-Tutorial zum Herunterladen, Installieren und Konfigurieren von mysql-5.7.28 unter Windows
Vor kurzem musste ich die Version der MySQL-Daten...
Eine kurze Diskussion über die Lebenszyklusfunktionen von React Component
Was sind die Lebenszyklusfunktionen von React-Kom...
Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen
Letztes Mal haben wir über einige SQL-Abfrageopti...
8 Befehle zur effektiven Verwaltung von Prozessen in Linux
Vorwort Die Rolle des Prozessmanagements: Integri...
Beispielcode zum Erstellen eines minimierten Header-Effekts nur mit CSS
Zusammengeklappte Kopfzeilen sind eine großartige...
HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute
Bild-Tag : <img> Um ein Bild in eine Seite e...
Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04
1. Laut dem Online-Tutorial schlägt die Installat...
Implementierung der Änderung von Konfigurationsdateien im Docker-Container
1. Betreten Sie den Container docker run [Option]...
Lösung für das 404-Problem der Tomcat-Installation in Docker
Suchen Sie die Container-ID von Tomcat und rufen ...
Code zum Aktivieren von IE8 im IE7-Kompatibilitätsmodus
Das beliebteste Tag ist IE8 Browser-Anbieter geben...
So aktualisieren Sie den Kernel in Deepin Linux manuell
deepin und Ubuntu sind beides auf debian basieren...
Tutorial zum binären Suchbaumalgorithmus für JavaScript-Anfänger
Inhaltsverzeichnis Was ist ein binärer Suchbaum (...
Beispiel für Formularaktion und „onSubmit“
Erstens: Aktion ist ein Attribut des Formulars. HT...