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 erreichen

Ressourcenfreigabe zwischen verschiedenen Ursprüngen (CORS)

1.1 Was ist CORS

CORS (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?

Bildbeschreibung hier einfügen

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>

Bildbeschreibung hier einfügen

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...");
});

Starten Sie den Dienst nodemon server.js

Bildbeschreibung hier einfügen

Laufergebnisse:

Bildbeschreibung hier einfügen

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:

Dreistufige Verknüpfung des Provinz- und Gemeinde-Ajax-Codes
JSON, AJAX, Maven-Grundlagen
Implementierungscode für die Ajax-Anmeldeüberprüfung
Ajax realisiert die Verbindung zwischen Provinzen, Städten und Bezirken
jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts
Vorläufige Implementierung von Ajax (unter Verwendung von vscode+node.js+express framework)
So verwenden Sie AJAX zum Abrufen von Django-Backend-Daten
Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax

<<: Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster

>>: Virtuelle Maschinen zwischen VMware Workstation und vSphere migrieren (Bild und Text)

Nginx-Dienst 500: Interner Serverfehler einer der Gründe

Detaillierte Erläuterung von MySQL-Ereignisänderungsereignissen (ALTER EVENT), Deaktivierungsereignissen (DISABLE), Aktivierungsereignissen (ENABLE), Ereignisumbenennungen und Datenbankereignismigrationsvorgängen

Artikel

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 erreichen

1.1 Was ist CORS

1.2 Wie funktioniert CORS?

1.3 Wofür wird CORS verwendet?

Nginx-Dienst 500: Interner Serverfehler einer der Gründe

Lösung für das Problem des Speicherns des Formats in HTML TextArea

Probleme bei der Ausführungsreihenfolge von AND und OR in SQL-Anweisungen

MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Detaillierte Erklärung der Eigenschaften, Unterschiede und Konvertierung von px, em, rem und pt in CSS

Die jQuery + Swiper-Komponente realisiert den Umschalteffekt der gleitenden Jahresregisterkarte in der Zeitleiste

Detaillierte Erklärung von Objektliteralen in JS

Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Zusammenfassung der Änderungen bei der Verwendung von Axios in den Studiennotizen zu Vue3

Detaillierte Erläuterung von MySQL-Ereignisänderungsereignissen (ALTER EVENT), Deaktivierungsereignissen (DISABLE), Aktivierungsereignissen (ENABLE), Ereignisumbenennungen und Datenbankereignismigrationsvorgängen

Artikel empfehlen

React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)

Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren

Zusammenfassung der Fallstricke bei der Verwendung von Nginx als Reverse-Proxy für GRPC

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

Zusammenfassung der Fallstricke bei Virtualbox Centos7 NAT+Host-Only-Netzwerken

Beispielcode für nahtloses Scrollen mit Flex-Layout

Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen

js realisiert den Effekt des Tanabata-Geständnisfeuers, jQuery realisiert die Feuerfeuertechnologie

So stellen Sie HBase mit Docker bereit

Spezifische Verwendung der Schnittstelle wx.getUserProfile im Applet

Lösung für das Problem, dass MySQL-Befehle nicht auf Chinesisch eingegeben werden können

Werbefähigkeiten im Baidu Union-Umfeld (grafisches Tutorial)

So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Windows-Plattformkonfiguration Version 5.7 + MySQL-Datenbankdienst