Ursachen und Lösungen für domänenübergreifende Probleme bei Ajax-Anfragen

1. Wie entsteht Cross-Domain?

Wenn wir eine URL anfordern, deren Protokoll, Domänenname oder Port sich vom Protokoll, Domänennamen oder Port der aktuellen Seiten-URL unterscheidet, nennen wir dies „Cross-Domain“.

Domänenübergreifendes Arbeiten führt zu:
1. Cookies, LocalStorage und IndexedDB von Webseiten mit anderem Ursprung können nicht gelesen werden
2. Kein Zugriff auf den DOM von Webseiten mit anderem Ursprung möglich
3. Es können keine AJAX-Anfragen an Adressen gesendet werden, die nicht denselben Ursprung haben (können gesendet werden, aber der Browser verweigert die Annahme der Antwort)

2. Die Grundursache für Cross-Domain

Die Hauptursache für domänenübergreifende Anfragen ist die Same-Origin-Policy des anfordernden Browsers. Die Gründe für den Fehler bei domänenübergreifenden Anfragen sind: Same-Origin-Policy des Browsers && Anfrage ist vom Typ Ajax && Anfrage ist tatsächlich domänenübergreifend

3. Lösung

Einführung von drei Methoden: JSONP, CORS und Proxy-Weiterleitung

1. JSONP

JSONP ist eine gängige Methode für die Cross-Origin-Kommunikation zwischen Servern und Clients. Das größte Merkmal ist seine Einfachheit, Anwendbarkeit und gute Kompatibilität (kompatibel mit niedrigeren IE-Versionen). Der Nachteil besteht darin, dass es nur Get-Anfragen, aber keine Post-Anfragen unterstützt.
Prinzip: Das src- oder href-Attribut der img-, srcipt- und link-Tags unterliegt nicht der Same-Origin-Policy und kann als Anfrage verwendet werden. Nachdem das Backend die Anfrage empfangen hat, gibt es eine Rückruffunktion zurück und ruft die vom Frontend definierte Funktion auf, um eine domänenübergreifende Anfrage zu implementieren.

Nehmen wir ein ganz einfaches Beispiel: Wir fordern ein Bild von einer Netzwerkadresse über das src-Attribut des img-Tags an. Dies ist eine Anfrage, die nicht vom selben Ursprung stammt, aber da die Same-Origin-Policy des Browsers nur für Ajax-Anfragen gilt, wird unsere Anfrage davon nicht betroffen sein. Mit anderen Worten: Nur Ajax-Anfragen verursachen domänenübergreifende Probleme.

2. CORS

CORS ist die Abkürzung für Cross-Origin Resource Sharing. Es handelt sich um einen W3C-Standard und eine grundlegende Lösung für Cross-Origin-AJAX-Anfragen.

CORS lässt jede Art von Anfrage zu. Bei der Verwendung von CORS für den Datenzugriff muss der Client keine Datenzugriffslogik ändern. Die gesamte Arbeit wird automatisch zwischen dem Server und dem Browser erledigt. Der Frontend-Code unterscheidet sich nicht vom Senden einer normalen Ajax-Anfrage. Wir müssen ihn nur serverseitig einrichten (das Backend ist aktiv).

3. Proxy-Weiterleitung

Richten Sie einen Zwischenproxydienst zwischen dem Frontend-Dienst und dem Backend-Schnittstellendienst ein. Seine Adresse bleibt dieselbe wie die des Frontend-Servers. Dann:
Auf diese Weise können wir die Schnittstellenweiterleitung über den Zwischenserver durchführen und domänenübergreifende Probleme in der Entwicklungsumgebung lösen. Es scheint kompliziert, aber tatsächlich hat vue-cli diese Technologie für uns integriert. Wir müssen sie nur nach Bedarf konfigurieren.

Konfigurieren Sie den Proxyserver im devServer (Entwicklungsumgebung) von vue.config.js, um Anfragen über diesen Proxyserver zu senden. Dies ist kein reines domänenübergreifendes Problem. Der Code lautet wie folgt:

modul.exporte = {
  devServer: {
    // ... weggelassen // Proxy-Konfiguration proxy: {
        // Wenn die Anforderungsadresse mit /api beginnt, wird der Proxy-Mechanismus ausgelöst // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // Die echte Schnittstellenadresse, die wir als Proxy verwenden möchten}
      }
    }
  }
}

Denken Sie daran, dass der Stammpfad in baseURL eine relative und keine absolute Adresse ist.

Oben finden Sie ausführliche Informationen zu den Ursachen und Lösungen von domänenübergreifenden Problemen im Ajax-Anforderungs-Frontend. Weitere Informationen zu den Ursachen und Lösungen von domänenübergreifenden Ajax-Problemen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!