Domainübergreifender Javascript-Fehler

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist JavaScript zur Kerntechnologie für die Erstellung moderner Webanwendungen geworden. In der Praxis treten jedoch häufig domänenübergreifende JavaScript-Fehler auf. In diesem Artikel werden die Ursachen und Lösungen vorgestellt und erläutert, wie Sie verhindern können, dass domänenübergreifende JavaScript-Fehler auftreten.

1. Gründe für domänenübergreifende JavaScript-Fehler

In JavaScript beziehen sich domänenübergreifende Fehler darauf, dass eine Webseite unter einem Domänennamen eine HTTP-Anfrage an eine Webseite unter einem anderen Domänennamen initiiert und vom Browser abgefangen wird. Dies liegt daran, dass aufgrund der Same-Origin-Richtlinie des Browsers nicht direkt auf Ressourcen unter anderen Domänennamen zugegriffen werden kann, d. h. Datenfreigabe und Interaktion können nur unter demselben Domänennamen, derselben Portnummer und demselben Protokoll erreicht werden.

Wenn wir uns beispielsweise auf einer Website mit dem Namen „www.example.com“ befinden und eine Ajax-Anfrage an eine Website mit dem Namen „www.another-example.com“ senden möchten, tritt ein domänenübergreifender Fehler auf.

2. Lösung für domänenübergreifende JavaScript-Fehler

1. Verwenden Sie jsonp

jsonp ist eine Möglichkeit, Skript-Tags zu verwenden, um domänenübergreifende Anfragen zu stellen. In JSONP verpackt der Server seine Antwortdaten in die Rückruffunktion und gibt sie dann an den Client zurück, und der Client kann die Daten abrufen.

Der folgende Code zeigt beispielsweise, wie JSONP zum Implementieren domänenübergreifender Anforderungsdaten verwendet wird:

function getData() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data?callback=handleData';
    document.querySelector('head').appendChild(scriptElement);
}

function handleData(data) {
    console.log(data);
}

2. Ändern Sie die Servereinstellungen, um domänenübergreifende Anforderungen zu unterstützen.

Konfigurieren Sie die CORS-Richtlinie (Cross-domain Resource Sharing). Auf dem Server können Sie den Client Daten von anderen Domänennamen abrufen lassen. In Node.js können wir beispielsweise das Modul cors verwenden, um domänenübergreifende Anforderungen zu implementieren.

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
    res.send('data from another domain');
});

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

3. Proxyserver

Verwenden Sie einen Proxyserver, um domänenübergreifende Anforderungen an den Server unter dem Zieldomänennamen weiterzuleiten und die Ergebnisse dann an den Client zurückzugeben, um domänenübergreifende Probleme zu lösen.

Zum Beispiel können wir nginx oder Node.js als Proxyserver verwenden.

3. So verhindern Sie domänenübergreifende JavaScript-Fehler

Obwohl wir die oben genannten Methoden verwenden können, um domänenübergreifende Probleme zu lösen, besteht der beste Weg darin, beim Schreiben von Code zu versuchen, domänenübergreifende Anforderungen zu vermeiden.

1. Verwenden Sie relative Pfade

Verwenden Sie relative Pfade zum Abrufen von Ressourcen anstelle absoluter Pfade, um das Senden von Anfragen an andere Domänennamen zu vermeiden.

Im folgenden Code wird beispielsweise die Bildressource image.jpg über einen relativen Pfad abgerufen:

<img src="image.jpg" alt="example">

2. Verwenden Sie die vom Browser bereitgestellte API.

Verwenden Sie stattdessen die vom Browser bereitgestellte API, um die Ressource abzurufen Initiieren einer HTTP-Anfrage, um die Ressource abzurufen.

Verwenden Sie beispielsweise die Datei-API, um den Dateiinhalt abzurufen, anstatt ihn über eine Ajax-Anfrage abzurufen.

document.getElementById('upload').addEventListener('change', () => {
    const file = document.getElementById('upload').files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        console.log(e.target.result);
    };

    reader.readAsDataURL(file);
});

3. Verwenden Sie Subdomain-Namen unter demselben Domain-Namen.

Verwenden Sie unterschiedliche Subdomain-Namen unter demselben Domain-Namen, um jeweils unterschiedliche Dienste bereitzustellen, um domänenübergreifende Anfragen zu vermeiden.

Verwenden Sie beispielsweise xxx.example.com und yyy.example.com, um jeweils unterschiedliche Dienste bereitzustellen.

Zusammenfassung

JavaScript-Cross-Domain-Fehler sind ein häufiges Problem bei der Front-End-Entwicklung, und es gibt viele Möglichkeiten, dieses Problem zu lösen. Wir können JSONP verwenden, Servereinstellungen ändern und Proxyserver verwenden, um domänenübergreifende Probleme zu lösen. Der beste Weg besteht jedoch darin, beim Schreiben von Code zu versuchen, domänenübergreifende Anforderungen zu vermeiden, um das Auftreten domänenübergreifender Fehler besser zu verhindern.

Das obige ist der detaillierte Inhalt vonDomainübergreifender Javascript-Fehler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!