2022 Herbstrekrutierung Polyway Front-End-Interview

Ursprüngliche URL: https://www.nowcoder.com/discuss/353158719997419520?sourceSSR=search

Wie realisiert man die flache Kopie und die tiefe Kopie des Objekts?

flache Kopie:

Flaches Kopieren kopiert nur die Eigenschaften der ersten Ebene des Objekts und kopiert nicht rekursiv verschachtelte Objekte.

Verwenden Sie Object.assign()

Object.assign()Die statische Methode kopiert alle aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in das Zielobjekt und gibt das geänderte Zielobjekt zurück.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target);
// Expected output: true

Verwenden Sie den Spread-Operator

let obj1 = {
    name: "jack",
    age: 18
  }
  let obj2 = {}
  obj2 = { ...obj1 }
  console.log(obj2)
  输出
  {
    "name": "jack",
    "age": 18
}

tiefe Kopie

Deep Copy erstellt einen neuen Stapel. Die Eigenschaften der beiden Objekte sind gleich, sie entsprechen jedoch zwei unterschiedlichen Adressen. Durch Ändern der Eigenschaften eines Objekts werden die Eigenschaften des anderen Objekts nicht geändert.

Verwenden Sie eine Drittanbieterbibliothek _.cloneDeep()

const _ = require('lodash');
const obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
const obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);// false

Verwenden Sie JSON.stringify()

let newobj = JSON.parse(JSON.stringify(obj))//深拷贝

JSON.stringify()Die Methode konvertiert ein JavaScript-Objekt oder einen JavaScript-Wert in einen JSON-String

JSON.parse()Die Methode wird verwendet, um die JSON-Zeichenfolge zu analysieren und den durch die Zeichenfolge beschriebenen JavaScript-Wert oder das JavaScript-Objekt zu erstellen

Aber diese Methode hat Nachteile, sie ignoriert undefined, symbolund函数

1. Wenn in obj ein Zeitobjekt vorhanden ist, liegt das Ergebnis von JSON.parse nach JSON.stringify, time, nur in Form einer Zeichenfolge vor. anstelle eines Zeitobjekts;

2. Wenn in obj RegExp- und Error-Objekte vorhanden sind, erhält das Ergebnis der Serialisierung nur leere Objekte.

3. Wenn in obj eine undefinierte Funktion vorhanden ist, verliert das Ergebnis der Serialisierung die Funktion oder ist undefiniert.

4. Wenn in obj NaN, Infinity und -Infinity vorhanden sind, wird das Ergebnis der Serialisierung null

5.JSON.stringify() kann nur die aufzählbaren eigenen Eigenschaften des Objekts serialisieren. Wenn das Objekt in obj beispielsweise von einem Konstruktor generiert wird, verwenden Sie JSON.parse(JSON.stringify(obj)) nach dem tiefen Kopieren des Konstruktors des Objekts wird verworfen;

6. Wenn das Objekt einen Zirkelverweis enthält, kann die tiefe Kopie nicht korrekt implementiert werden.

Handschriftliche tiefe Kopie (implementiert durch Rekursion)

function checkType(target){
	return Object.prototype.toString.call(target).slice(8,-1)
}
function deepClone(data){
	let type = checkType(data)
	let obj
	if(type === 'Array'){
		obj = []
		for(let i = 0; i < data.length; i++){
			obj.push(deepClone(data[i]))
		}
	}else if(type === 'Object'){
		obj = {}
		for(const key in data){
			if(data.hasOwnProperty(key)){
				obj[key] = deepClone(data[key])
			}
		}
	}else{
		return data
	}
	return obj
}

Was ist Eventdelegation? Welche Beispiele gibt es? Warum möchten Sie an das übergeordnete Element und nicht an das untergeordnete Element binden?

Die Ereignisdelegation (Ereignisdelegation) ist ein Ereignisverarbeitungsmodus, der Ereignishandler an ein übergeordnetes Element bindet, anstatt Ereignisse direkt an untergeordnete Elemente zu binden. Wenn ein Ereignis ausgelöst wird, gelangt das Ereignis zum übergeordneten Element und wird dann vom Ereignishandler des übergeordneten Elements verarbeitet.

Angenommen, Sie haben eine HTML-Liste, die mehrere Listenelemente (li-Elemente) enthält. Wenn Sie Klick-Ereignishandler für jedes Listenelement hinzufügen möchten, besteht der traditionelle Ansatz darin, Ereignishandler für jedes Listenelement separat zu binden. Durch die Ereignisdelegierung kann der Ereignishandler an das übergeordnete Element der gesamten Liste gebunden werden, und dann kann das Klickereignis jedes Listenelements über den Ereignisblasenmechanismus verarbeitet werden.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Warum möchten Sie das Ereignis an das übergeordnete Element und nicht an das untergeordnete Element binden? Es gibt verschiedene Gründe:

Reduzieren Sie die Anzahl der Ereignisbindungen: Bei der Ereignisdelegierung muss nur ein Ereignishandler an das übergeordnete Element gebunden werden und nicht jedes untergeordnete Element einzeln. Dies verbessert die Leistung und die Wartbarkeit des Codes beim Umgang mit einer großen Anzahl von Elementen.
Dynamisches Hinzufügen oder Entfernen von Elementen: Wenn untergeordnete Elemente dynamisch über JavaScript hinzugefügt oder entfernt werden, kann die Ereignisdelegierung Ereignisse für diese neu hinzugefügten oder entfernten Elemente automatisch verarbeiten, ohne Ereignishandler manuell neu zu binden.
Vereinfachen Sie die Codestruktur: Durch die Zentralisierung von Ereignishandlern auf übergeordneten Elementen können Sie Ihre Codestruktur vereinfachen, doppelten Code reduzieren und Ihren Code lesbarer und wartbarer machen

Der Rückgabewert von axios ist Versprechen. Bitte sagen Sie mir, was Sie unter Versprechen verstehen.

Promise (Promise) ist ein Objekt, das in JavaScript zur Verarbeitung asynchroner Vorgänge verwendet wird. Es stellt einen Vorgang dar, der noch nicht abgeschlossen ist, aber irgendwann abgeschlossen wird, und kann sein Ergebnis oder seinen Fehler erhalten.

Versprechen haben drei Zustände:

Ausstehend: Der Anfangsstatus, der anzeigt, dass der Vorgang noch nicht abgeschlossen wurde.
Erfüllt: Zeigt an, dass der Vorgang erfolgreich abgeschlossen wurde.
Abgelehnt: Zeigt an, dass der Vorgang fehlgeschlagen ist.

Beim Erstellen eines Promise-Objekts können Sie eine Executor-Funktion (Executor-Funktion) übergeben, die zwei Parameter akzeptiert: Auflösung und Ablehnung. Ein Versprechen kann vom Status „Ausstehend“ in den Status „Erfüllt“ überführt werden, indem die Auflösungsfunktion aufgerufen und ein Wert als Ergebnis der Operation übergeben wird. Ein Versprechen kann von „Ausstehend“ in „Abgelehnt“ geändert werden, indem die Ablehnungsfunktion aufgerufen und ein Fehlerobjekt als Grund für den Vorgang übergeben wird.

Das Promise-Objekt verfügt über eine then-Methode, die zwei Rückruffunktionen als Parameter akzeptiert: onFulfilled und onRejected. Wenn der Promise-Status „Erfüllt“ wird, wird die Rückruffunktion „onFulfilled“ aufgerufen und das Operationsergebnis als Parameter übergeben; wenn der Promise-Status „Abgelehnt“ wird, wird die Rückruffunktion „onRejected“ aufgerufen und das Fehlerobjekt als Parameter übergeben.

Promise bietet auch andere Methoden, z. B. die Methode „catch“ zum Abfangen von Fehlern, die Methode „final“ zum Angeben einer Rückruffunktion, die unabhängig vom Status des Versprechens ausgeführt werden soll, usw.

Der Hauptvorteil von Promise besteht darin, dass es den Prozess der Verarbeitung asynchroner Vorgänge vereinfacht und eine bessere Codestruktur bietet. Es vermeidet das Problem der Callback-Hölle und macht asynchrone Vorgänge einfacher zu verstehen und zu organisieren. Durch die Verwendung von Promise kann asynchroner Code als kontinuierliche Aufrufkette geschrieben werden, wodurch er besser lesbar und wartbar ist.

Für Axios gibt es ein Promise-Objekt zurück, das das Ergebnis der asynchronen Anforderung durch Aufrufen der then-Methode verarbeiten oder mögliche Fehler über die Catch-Methode abfangen kann. Dies ermöglicht eine einfachere Handhabung asynchroner Anfragen und eine einfachere Fehlerbehandlung.

Verständnis des Vue-Lebenszyklus

Folgen Sie einfach der Routine

Welche Funktion hat die Taste v-for?

In Vue.js 2 keywerden Attribute verwendet, um v-fordie Identität des DOM-Elements zu identifizieren und zu verfolgen, das gerendert wird, wenn eine Direktive verwendet wird. Es spielt eine wichtige Rolle im virtuellen DOM- Algorithmus von Vue .

Wenn v-forDirektiven zum Durchlaufen einer Liste von Daten verwendet werden, generiert Vue eine Reihe von DOM-Elementen, um jedes Listenelement darzustellen. Um die Leistung zu optimieren und die Rendering-Effizienz zu verbessern, wird Vue vorhandene DOM-Elemente so weit wie möglich wiederverwenden, anstatt neue Elemente neu zu erstellen.

Dies wirft die Frage auf: Wie erkennt man, ob zwei Elemente gleich sind und wiederverwendet werden können? Das ist es key, was Attribute bewirken. Vue verwendet keyAttribute, um jedes generierte DOM-Element eindeutig zu identifizieren. Es handelt sich hierbei nicht um Eigenschaften der Komponente, sondern um Vue-spezifische Eigenschaften.

Wenn sich die Daten ändern, vergleicht Vue die neuen Daten mit den alten Daten und keybeurteilt anhand der Attribute, welche Elemente aktualisiert, wiederverwendet oder gelöscht werden müssen. Wenn zwei Elemente dasselbe haben key, geht Vue davon aus, dass es sich um dasselbe Element handelt, wodurch das vorherige DOM-Element wiederverwendet und unnötige erneute Renderings vermieden werden.

keyDie Begründung für Attribute lässt sich wie folgt zusammenfassen:

1. Das Schlüsselattribut muss eindeutig sein und wird normalerweise anhand von Daten mit einer eindeutigen Kennung generiert.
2. Wenn Sie den Befehl v-for zum Rendern der Liste verwenden, fügen Sie jedem Listenelement ein Schlüsselattribut hinzu.
3. Wenn die Daten aktualisiert werden, vergleicht Vue die alten und neuen Daten und bestimmt anhand des Schlüsselattributs, welche Elemente neu gerendert, wiederverwendet oder gelöscht werden müssen.
4. Wenn zwei Elemente denselben Schlüssel haben, geht Vue davon aus, dass es sich um dasselbe Element handelt, und verwendet das vorherige DOM-Element erneut.

Durch die sinnvolle Verwendung keyvon Attributen können Sie die Leistung und Rendering-Effizienz Ihrer Vue-App maximieren, insbesondere wenn es um das Rendern von Listen geht.

Die Rolle des Schlüssels im virtuellen DOM

Der Schlüssel ist die Kennung des virtuellen DOM-Objekts. Wenn sich die Daten ändern, generiert vue ein neues virtuelles DOM entsprechend den neuen Daten und vergleicht dann das neue virtuelle DOM mit dem alten virtuellen DOM. Die Vergleichsregeln lauten wie folgt:

Vergleichsregeln:

1. Der gleiche Schlüssel wie das neue virtuelle DOM befindet sich im alten virtuellen DOM:

Wenn sich der Inhalt im virtuellen DOM nicht geändert hat, verwenden Sie direkt das vorherige reale DOM

Wenn sich der Inhalt im virtuellen DOM ändert, wird ein neues reales DOM generiert, das das reale DOM auf der Seite ersetzt

2. Der gleiche Schlüssel wie im neuen virtuellen DOM wurde im alten virtuellen DOM nicht gefunden:

Erstellen Sie ein neues echtes DOM und rendern Sie es dann auf der Seite

Probleme, die bei der Verwendung des Index als Schlüssel auftreten können:

1. Wenn die Daten in umgekehrter Reihenfolge hinzugefügt, in umgekehrter Reihenfolge gelöscht usw. werden, um die Bestellung zu zerstören:

Es werden unnötige echte DOM-Updates generiert, der Schnittstelleneffekt ist in Ordnung, aber die Effizienz ist gering

2. Wenn die Struktur auch das DOM der Eingabeklasse enthält:

Führt zu einem falschen DOM-Update, die Schnittstelle weist Probleme auf

Sprechen Sie über die Eigenschaften von Vuex?

Zustand (Zustand) : Das Herzstück von Vuex ist eine einzelne Datenquelle, die den von allen Komponenten gemeinsam genutzten Zustand enthält und als Zustand bezeichnet wird. Der Status ist reaktiv und wenn er sich ändert, werden alle davon abhängigen Komponenten automatisch aktualisiert.
Getter : Getter werden verwendet, um einige abgeleitete Daten aus dem Zustand abzuleiten, ähnlich wie berechnete Eigenschaften in Vue-Komponenten. Sie können Zustände filtern, berechnen, kombinieren und in Komponenten verwenden.
Mutationen : Mutationen sind eine Möglichkeit, den Zustand zu verändern. Es handelt sich um synchrone Operationen, die synchrone Aufgaben bearbeiten. Jede Mutation verfügt über einen Ereignistyp vom Typ „String“ und eine Rückruffunktion, die aufgerufen wird, um den Status zu ändern, wenn eine Mutation ausgelöst wird.
Aktionen (Aktion) : Aktionen werden zur Bearbeitung asynchroner Aufgaben und komplexer Geschäftslogik verwendet. Sie können das Festschreiben mehrerer Mutationen enthalten und den Status indirekt durch den Aufruf von Mutationen ändern. Aktionen können asynchron sein, einige asynchrone Vorgänge ausführen (z. B. API-Anfragen) und dann eine oder mehrere Mutationen übermitteln.
Module : Vuex ermöglicht die Aufteilung des Speichers in Module mit jeweils eigenem Status, Gettern, Mutationen und Aktionen. Dies macht die Zustandsverwaltung für große Anwendungen flexibler und wartbarer.

Was ist der Unterschied zwischen dem Verlaufs- und dem Hash-Modus des Vue-Routers? Wann sollte der Verlauf verwendet werden? wann man Hash verwendet

Vue Router bietet zwei Routing-Modi: Verlaufsmodus und Hash-Modus. Sie unterscheiden sich in der URL-Darstellung und Browserkompatibilität.

Hash-Modus : Im Hash-Modus wird der Pfad der Route durch das „#“-Symbol in der URL dargestellt. Zum Beispiel http://example.com/#/about. Das Schöne an diesem Muster ist, dass es in allen modernen Browsern einwandfrei funktioniert, da eine Änderung des Hash-Teils nicht dazu führt, dass der Browser eine Anfrage an den Server sendet. Der Nachteil besteht jedoch darin, dass die URL redundante „#“-Symbole enthält, was nicht schön genug und möglicherweise nicht benutzerfreundlich ist.
Verlaufsmodus : Im Verlaufsmodus enthält die URL keine redundanten „#“-Symbole, sondern verwendet direkt den regulären URL-Pfad, um den Pfad der Route darzustellen. Zum Beispiel http://example.com/about. Dieser Modus sieht viel sauberer und freundlicher aus. Es verwaltet URLs mithilfe der History-API von HTML5, die URLs dynamisch ändern kann, ohne die Seite zu aktualisieren. Allerdings wird der Verlaufsmodus von einigen älteren Browsern möglicherweise nicht unterstützt, sodass für die Verarbeitung von Routing-Anfragen Serverunterstützung erforderlich ist.

Wann sollte der Verlaufsmodus verwendet werden?

Der Verlaufsmodus kann verwendet werden, wenn Sie einen schöneren Routing-Pfad wünschen, der einer regulären URL entspricht.
Der Verlaufsmodus kann verwendet werden, wenn die Bereitstellungsumgebung Ihrer Anwendung Routing-Anfragen verarbeiten und die richtige Seite zurückgeben kann.
Wenn Ihre Anwendung Vue.js und serverseitiges Rendering (SSR) verwendet, wird die Verwendung des Verlaufsmodus empfohlen, da SSR Routing-Anfragen verarbeiten kann.

Wann sollte der Hash-Modus verwendet werden?

Der Hash-Modus kann verwendet werden, wenn Ihre Anwendung in allen modernen Browsern ausgeführt werden muss, auch in älteren.
Wenn Ihre Anwendung in einer Umgebung ohne serverseitige Unterstützung bereitgestellt wird (z. B. ein statischer Dateiserver), können Sie den Hash-Modus verwenden.

Erzählen Sie mir bitte etwas über Ihr Verständnis von Caching. Kennen Sie andere Caches? (außer Strong Cache und Negotiation Cache)

Lokaler Cache (Lokaler Cache) : Der lokale Cache ist eine Cache-Methode, die Daten auf dem Client speichert (normalerweise Speicher oder Festplatte). Dadurch kann die Anzahl der Anfragen an den Server reduziert und die Antwortgeschwindigkeit verbessert werden. Zu den gängigen lokalen Caching-Technologien gehören: Speicher-Caching (z. B. Redis), Datei-Caching und Datenbank-Caching.
Verteilter Cache : Der verteilte Cache speichert Daten auf mehreren Knoten in einer verteilten Umgebung, um hohe Verfügbarkeit und Skalierbarkeit zu gewährleisten. Gängige verteilte Cache-Systeme sind: Memcached und Redis.
CDN-Cache (Content Delivery Network) : Der CDN-Cache ermöglicht Benutzern einen schnelleren Zugriff auf Daten, indem Inhalte an Edge-Knoten auf der ganzen Welt verteilt werden. Der CDN-Cache kann statische Dateien (wie Bilder, CSS- und JavaScript-Dateien) und zwischengespeicherte Kopien dynamischer Inhalte speichern, wodurch die Belastung des Quellservers verringert und die Benutzerzugriffsgeschwindigkeit verbessert wird.
Datenbankabfrage-Cache : Der Datenbankabfrage-Cache dient zum Zwischenspeichern der Ergebnisse von Datenbankabfragen, um wiederholte Datenbankabfragevorgänge zu vermeiden. Wenn dieselbe Abfrage häufig ausgeführt wird, können die Ergebnisse aus dem Cache abgerufen werden, wodurch der Druck auf den Datenbankzugriff verringert wird.
Objekt-Caching : Beim Objekt-Caching werden Objekte in einem Cache gespeichert, um den Aufwand für die Neuberechnung oder das erneute Abrufen von Objekten zu vermeiden. Objekt-Caches werden in der Regel zum Speichern komplexer Objekte verwendet, die berechnet oder aus anderen Datenquellen abgerufen wurden, um die Leistung und Reaktionsfähigkeit von Anwendungen zu verbessern.

obligatorisches Caching

Es wird keine Anfrage an den Server gesendet und Ressourcen werden direkt aus dem Cache gelesen. Anhand der Netzwerkoption in der Chrome-Konsole können Sie sehen, dass der von der Anfrage zurückgegebene Statuscode 200 ist

Verhandlungscache

Bevor Sie den lokalen Cache verwenden, müssen Sie eine Anfrage an den Server senden. Der Server beurteilt anhand einiger Parameter im Anfrageheader der Anfrage, ob er auf den Verhandlungscache trifft. Wenn es sich um den Namen handelt, gibt er den Status 304 zurück Code und bringen Sie einen neuen Antwortheader, um den Browser zu benachrichtigen. Lesen Sie Ressourcen aus dem Cache und verhandeln Sie den Cache, um das Problem zu lösen, dass Ressourcen bei erzwungenem Caching nicht aktualisiert werden

Die Parameter des Headers im obligatorischen Cache (Antwortheader)

Läuft ab: die Ablaufzeit im Antwortheader

Cache-Control: Wenn der Wert auf max-age=number gesetzt ist, stellt er die Cache-Zeit der von dieser Anfrage zurückgegebenen Ressource dar

Zusätzlich zu diesem Feld verfügt Cache-Control über die folgenden häufig verwendeten Einstellungswerte:

no-cache: Lokalen Cache nicht verwenden. Der Verhandlungscache muss verwendet werden. Bestätigen Sie zunächst mit dem Server, ob die zurückgegebene Antwort geändert wurde. Wenn in der vorherigen Antwort ein ETag vorhanden ist, wird die Anforderung mit dem Server überprüft. Wenn die Ressource nicht geändert wurde, ist dies möglich Vermeiden Sie ein erneutes Herunterladen

no-store: Verbietet die Verwendung des Browser-Cache

Öffentlich: Kann von allen Benutzern zwischengespeichert werden, einschließlich Endbenutzern und zwischengeschalteten Proxyservern wie CDN

privat: Es kann nur von Endbenutzer-Browsern zwischengespeichert werden, Zwischen-Cache-Server wie CDN dürfen nicht zwischenspeichern

Verhandlungscache

Cache-Kontrolle: kein Cache

Last-Modify/If-Modify/Since: Wenn der Browser zum ersten Mal eine Ressource anfordert, wird Last-Modify zum vom Server zurückgegebenen Header hinzugefügt. Last-Modify ist eine Zeit, die den Zeitpunkt der letzten Änderung der Ressource angibt. Wenn der Browser die Ressource erneut anfordert, enthält der Anforderungsheader If-Modify-Since, also die letzte Änderung, die vor dem Cache zurückgegeben wird. Nach dem Empfang von If-Modify-Since beurteilt der Server anhand der letzten Änderungszeit der Ressource, ob auf den Cache zugegriffen werden soll. Da die Einheit von Last-Modify Sekunden ist, ist nicht bekannt, ob es innerhalb einer Sekunde mehrmals geändert wurde. Daher gibt es den folgenden ETag

Etag/If-none-Match: Wenn der Webserver auf die Anfrage antwortet, teilt er dem Browser die eindeutige Kennung der aktuellen Ressource auf dem Server mit. Die vom Webserver empfangene Anfrage vergleicht den empfangenen Hash-Wert, um festzustellen, ob die Ressource geändert wurde

Was ist Cross-Domain? Wie erreicht man domänenübergreifend? Das Prinzip der domänenübergreifenden Cors?

Cross-Origin bezieht sich auf die Front-End-Webseite, wenn der Ursprung einer Anfrage (Origin) vom Ursprung der aktuellen Seite abweicht, d. h. wenn die Domänennamen, Protokolle oder Ports der beiden Webseiten inkonsistent sind. Es treten herkunftsübergreifende Probleme auf.

Aus Sicherheitsgründen beschränken moderne Browser den Zugriff auf Cross-Origin-Anfragen. Dies liegt daran, dass bösartige Websites ohne domänenübergreifende Einschränkungen Daten von anderen Websites erhalten können, indem sie Skripte im Browser des Benutzers ausführen, was zu Sicherheitsproblemen führt.

Um Cross-Origin-Anfragen umzusetzen, gibt es mehrere gängige Methoden:

JSONP (JSON mit Auffüllung): Mithilfe <script>der Funktion, dass Tags keine domänenübergreifenden Einschränkungen haben, können Sie dynamisch <script>Tags erstellen, um Daten von anderen Domänen anzufordern. JSONP kann jedoch nur für GET-Anfragen verwendet werden und erfordert Backend-Unterstützung, um in Funktionsaufrufe verpackte JSON-Daten zurückzugeben.
CORS (Cross-Origin Resource Sharing): CORS ist ein von modernen Browsern bereitgestellter Mechanismus, der einen domänenübergreifenden Zugriff durch das Hinzufügen spezifischer Felder zu Anforderungs- und Antwortheadern ermöglicht. CORS verwendet Preflight-Anfragen (OPTIONS-Anfragen), um zu prüfen, ob der Server bestimmte Cross-Origin-Anfragen zulässt, und unterstützt verschiedene Arten von Anfragemethoden (GET, POST usw.).

Das Prinzip von CORS besteht darin, den Anforderungs- und Antwortheadern bestimmte Felder hinzuzufügen, um dem Browser mitzuteilen, ob er den domänenübergreifenden Zugriff zulassen soll. Wenn ein Browser eine domänenübergreifende Anfrage initiiert, sendet er zunächst eine OPTIONS-Preflight-Anfrage, um zu prüfen, ob der Server domänenübergreifende Anfragen unterstützt. Wenn die vom Server zurückgegebene Antwort ein Header-Feld enthält, das domänenübergreifend zulässt, sendet der Browser weiterhin die eigentliche Anfrage.

Zu den wichtigsten Header-Feldern für CORS gehören:
- Origin: Gibt die Quelle der Anfrage an, also den Domänennamen der aktuellen Seite.
- Access-Control-Allow-Origin: Gibt die Quellen der vom Server zugelassenen Cross-Origin-Anfragen an. Es kann auf einen bestimmten Domänennamen festgelegt werden oder ein Platzhalterzeichen verwendet werden *, um jede Anforderung eines Domänennamens zuzulassen.
- Access-Control-Allow-Methods: Gibt die vom Server zugelassene Anforderungsmethode an.
- Access-Control-Allow-Headers: Zeigt zusätzliche vom Server zugelassene Anforderungsheaderfelder an.
- Access-Control-Allow-Credentials: Gibt an, ob das Senden von Anmeldeinformationen für ursprungsübergreifende Anforderungen (z. B. Cookies, HTTP-Authentifizierung) zulässig ist.
Proxy: Durch Einrichten eines Proxyservers unter demselben Domänennamen wird die domänenübergreifende Anforderung an den Zielserver weitergeleitet und die Antwort anschließend an das Frontend zurückgegeben. Dieser Ansatz erfordert eine entsprechende Konfiguration im Backend.

Verständnis für einfache und komplexe Anfragen?

Bei domänenübergreifenden Anfragen kann die Anfrage je nach Art der Anfrage und der Komplexität des Inhalts in zwei Typen unterteilt werden: einfache Anfrage (einfache Anfrage) und komplexe Anfrage (komplexe Anfrage).

Eine einfache Anfrage erfüllt die folgenden Bedingungen:

Die Anforderungsmethode ist eine von: GET, POST, HEAD.
Abgesehen von den folgenden Headerfeldern gibt es keine benutzerdefinierten Header. Der Anforderungsheader enthält nur die folgenden Felder: Accept, Accept-Language, Content-Language, Content-Type (beschränkt auf drei Werte: application/x-www-form-urlencoded, multipart/form-data, text/plain).

Das Merkmal einer einfachen Anfrage besteht darin, dass der Browser beim Senden einer Anfrage automatisch die domänenübergreifende Anfrage verarbeitet und keine Preflight-Anfrage (OPTIONS-Anfrage) sendet, sondern direkt die eigentliche Anfrage. Einfache Anfragen lösen nicht die Preflight-Schritte des Cross-Origin-Sicherheitsmechanismus aus, daher sind keine besonderen Einstellungen für die Antwortheader des Servers erforderlich.

Wenn bei komplexen Anforderungen die Anforderung nicht die Bedingungen einfacher Anforderungen erfüllt, sendet der Browser automatisch eine Preflight-Anfrage (OPTIONS-Anfrage) an den Server, um die vom Server zugelassenen domänenübergreifenden Regeln abzurufen.

Zu den Merkmalen komplexer Anfragen gehören:

Verwenden Sie eine andere Anforderungsmethode als die folgende, z. B. PUT, DELETE usw.
Senden Sie ein benutzerdefiniertes Anforderungsheaderfeld oder einen komplexen Typ wie application/json mit einem Content-Type-Wert.

In der Preflight-Anfrage ist ein Feld enthalten, Access-Control-Request-Methoddas die tatsächlich angeforderte Methode angibt. Nach Erhalt der Vorabprüfungsanforderung beurteilt der Server anhand dieses Felds, ob die tatsächliche Anforderung zugelassen wird. Wenn der Server domänenübergreifende Anfragen zulässt, wird das Feld, das domänenübergreifende Anfragen zulässt, im Antwortheader der Preflight-Anfrage festgelegt und der Browser sendet dann die eigentliche Anfrage.

Es ist zu beachten, dass die Preflight-Anfrage automatisch vom Browser gesendet wird und die Preflight-Anfrage und die eigentliche Anfrage separat gesendet werden, was zu zusätzlichem Netzwerkaufwand und Verzögerungen führen kann. Um häufige Preflight-Anfragen zu vermeiden, kann der Server Access-Control-Max-Ageim Antwortheader ein Feld festlegen, um die Cache-Zeit der Preflight-Anfrage anzugeben und die Häufigkeit des Sendens der Preflight-Anfrage zu reduzieren.

Es ist zu beachten, dass der Browser den domänenübergreifenden Sicherheitsmechanismus für einfache und komplexe Anfragen automatisch verarbeitet. Die Serverseite muss jedoch auch entsprechend konfiguriert werden, um sicherzustellen, dass die richtigen Antwortheaderfelder zurückgegeben werden, damit der Browser sie korrekt verarbeiten kann domänenübergreifende Anfragen.

Erzählen Sie mir, wie ich mich anmelden kann? Was sind die Vor- und Nachteile dieser Implementierungen? Wie kann man sich verbessern?

Es gibt viele Möglichkeiten, die Anmeldung zu implementieren. Im Folgenden sind einige gängige Methoden aufgeführt:

Sitzungsbasierte Anmeldung: Nachdem sich der Benutzer erfolgreich angemeldet hat, erstellt der Server eine Sitzung (Sitzung) und speichert den Anmeldestatus des Benutzers auf der Serverseite. Der Server generiert eine eindeutige Sitzungs-ID (Sitzungs-ID) für die Sitzung und sendet die Sitzungs-ID dann an den Client (normalerweise durch Speichern der ID in einem Cookie). Der Client sendet in nachfolgenden Anfragen die Sitzungs-ID über das Cookie an den Server, und der Server überprüft den Anmeldestatus des Benutzers anhand der Sitzungs-ID.
Tokenbasierte Anmeldung: Nachdem sich der Benutzer erfolgreich angemeldet hat, generiert der Server ein verschlüsseltes Token (Token) und sendet das Token an den Client. Der Client speichert das Token lokal (normalerweise in LocalStorage oder SessionStorage). Bei nachfolgenden Anforderungen fügt der Client das Token in den Anforderungsheader (normalerweise im Autorisierungsheader) ein und sendet es an den Server. Der Server überprüft den Anmeldestatus des Benutzers anhand des Tokens.
OAuth-basierte Anmeldung: OAuth ist ein Autorisierungsprotokoll, das es Benutzern ermöglicht, sich mit Konten auf Drittplattformen (wie Google, Facebook usw.) bei anderen Websites anzumelden. Bei dieser Methode meldet sich der Benutzer zunächst bei der Drittanbieterplattform an und die Plattform stellt dann dem Client einen Autorisierungsnachweis (Zugriffstoken) aus. Der Client verwendet diese Anmeldeinformationen, um die Anmeldung beim Server anzufordern, und der Server realisiert die Anmeldung, indem er die Gültigkeit der Anmeldeinformationen überprüft.

Jede Anmeldemethode hat ihre Vor- und Nachteile. Hier finden Sie eine kurze Beschreibung:

Sitzungsbasierte Anmeldung:
- Vorteile: Einfach und benutzerfreundlich, geeignet für herkömmliche Webanwendungen. Sitzungsinformationen werden serverseitig gespeichert, was relativ sicher ist.
- Nachteile: Der Sitzungsstatus muss auf der Serverseite aufrechterhalten werden, was viele Serverressourcen verbraucht. Nicht geeignet für verteilte Systeme oder Multiserverumgebungen.
Tokenbasierte Anmeldung:
- Vorteile: zustandslos, geeignet für verteilte Systeme und Multiserverumgebungen. Reduzierte Serverlast und Ressourcenverbrauch.
- Nachteile: Token müssen auf der Clientseite gespeichert werden, was Sicherheitsrisiken birgt. Token können gestohlen oder manipuliert werden, daher sind Sicherheitsmaßnahmen wie die Verwendung von HTTPS erforderlich.
OAuth-basierte Anmeldung:
- Vorteile: Bequem für Benutzer, Sie können sich mit einem vorhandenen Plattformkonto eines Drittanbieters anmelden. Reduzierter Registrierungsprozess für Benutzer.
- Nachteile: Man muss sich auf Plattformen Dritter verlassen, Benutzerinformationen können von Plattformen Dritter kontrolliert und eingeschränkt werden. Die Implementierung ist komplex und erfordert die Integration mit Drittplattformen.