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
Grundlegendes zum MySQL-Abfrageoptimierungsprozess
Inhaltsverzeichnis Parser und Präprozessoren Abfr...
Detaillierte Schritte zum manuellen Konfigurieren der IP-Adresse in Linux
Inhaltsverzeichnis 1. Geben Sie zuerst das Konfig...
Legen Sie ein Symbol für die Website fest, das ganz links auf der Registerkarte des Browsers angezeigt werden soll
Was ist der Zweck dieses Satzes? Code kopieren Der...
Detaillierte Erklärung zur Überwachung von MySQL-Anweisungen
Schnelles Lesen Warum müssen wir SQL-Anweisungen ...
Detaillierte Analyse der verschiedenen Hintergründe, Nutzungsszenarien und Techniken von CSS
Dieser Artikel wurde auf GitHub https://github.co...
Detaillierte Einführung in die Linux-Hostnamenkonfiguration
Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...
Zabbix überwacht die MySQL-Instanzmethode
1. Überwachungsplanung Bevor Sie ein Überwachungs...
Detaillierte Erläuterung des grundlegenden Falls des React.js-Frameworks Redux
react.js Rahmen Redux https://github.com/reactjs/...
MySQL-Optimierung: Cache-Optimierung (Fortsetzung)
In MySQL gibt es überall Caches. Wenn ich den Que...
So aktivieren Sie TLS- und CA-Authentifizierung in Docker
Inhaltsverzeichnis 1. Zertifikat generieren 2. Ak...
Methoden und Schritte zum Bereitstellen von Go-Projekten basierend auf Docker-Images
Abhängigkeit vom Wissen Grundlagen der Go-Cross-K...
CSS transparenter Rahmen Hintergrund-Clip-Magie
In diesem Artikel wird hauptsächlich die wunderba...
Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung
Detaillierte Einführung in die Schritte zur Insta...
React-Diagramm Serialisierung JSON Interpretation Fallanalyse
Das Ziel dieses Dokuments ist es, die JSON-Serial...
So verwenden Sie Docker zum Erstellen eines Redis-Master-Slaves
1. Erstellen Sie eine Docker-Umgebung 1. Erstelle...