Eine kurze Analyse der Ursachen und Lösungen für domänenübergreifende Vue-Probleme

Mit der Entwicklung der Front-End-Technologie hat sich Vue zu einem JavaScript-Framework entwickelt, das viele Entwickler nicht nur wegen seiner Benutzerfreundlichkeit, Effizienz und Flexibilität, sondern auch wegen seines reichhaltigen unterstützenden Ökosystems sehr lieben. Gleichzeitig treten jedoch mit zunehmendem Umfang von Front-End-Projekten nach und nach Probleme bei der Bereitstellung von Vue-Projekten auf. Das häufigste Problem sind domänenübergreifende Probleme. In diesem Artikel werden die Ursachen, Lösungen und zugehörigen Vorgehensweisen für domänenübergreifende Vue-Probleme vorgestellt.

1. Warum gibt es bei Vue ein domänenübergreifendes Problem?

Der Grund für domänenübergreifende Probleme im Vue-Projekt liegt in der Same-Origin-Richtlinie des Browsers, was bedeutet, dass das Frontend domänenübergreifende Anforderungen nicht direkt initiieren kann. Die Same-Origin-Richtlinie ist eine grundlegende Sicherheitsrichtlinie, verursacht jedoch bei der Bereitstellung auch bestimmte Probleme für Vue-Entwickler. Im Allgemeinen bestimmt der Browser, ob die Anfrage vom gleichen Ursprung ist, indem er bestimmt, ob das Protokoll (http oder https), der Domänenname und der Port der beiden URLs identisch sind.

Ein typisches Beispiel für domänenübergreifende Probleme in Vue-Projekten ist, dass wenn das Front-End-Projekt die Back-End-API über AJAX anfordert und sich die URL der Back-End-API nicht in derselben Domäne befindet wie die URL des Im aktuellen Vue-Projekt treten domänenübergreifende Probleme auf.

2. Wie löst man domänenübergreifende Vue-Probleme?

Da das Problem nun geklärt ist, wollen wir einen Weg finden, es zu lösen. Im Folgenden stellen wir drei gängige Methoden zur Lösung domänenübergreifender Probleme vor, die auch die drei am häufigsten verwendeten Methoden sind.

1. CORS auf der Serverseite festlegen

Wir können domänenübergreifende Probleme lösen, indem wir CORS auf der Serverseite festlegen. CORS (Cross-Origin Resource Sharing) ist eine serverseitige Lösung für domänenübergreifende Probleme. Der Server teilt dem Browser mit, welche Domänennamenanfragen zulässig sind, indem er den Access-Control-Allow-Origin-Header in der HTTP-Antwort setzt. Wenn der Browser feststellt, dass der angeforderte Domänenname innerhalb des zulässigen Zugriffsbereichs liegt, kann er das Anforderungsergebnis erfolgreich zurückgeben.

Die spezifische Implementierungsmethode lautet wie folgt:

Setzen Sie das Access-Control-Allow-Origin-Attribut im Antwortheader des Backends, um den Front-End-Zugriff zu ermöglichen:

Access-Control-Allow-Origin: *

Im obigen Code bedeutet *, dass alle Anforderungsquellen sind erlaubt.

2. Verwenden Sie das ProxyTable-Attribut von Webpack-Dev-Server

In Vue können wir ProxyTable über Webpack-Dev-Server konfigurieren, um domänenübergreifende Probleme während der Entwicklung zu lösen. ProxyTable kann die lokalen Anforderungen des Entwicklers an den Server weiterleiten und so domänenübergreifende Probleme effektiv lösen.

proxyTable ist wie folgt konfiguriert:

dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

Im obigen Code gibt /api die Anforderung an, die weitergeleitet werden muss, target gibt die Back-End-Serveradresse an, die weitergeleitet werden muss, und changeOrigin: true gibt an, ob die Quelle geändert werden soll Anfrage, und pathRewrite wird verwendet, um den Anfragepfad neu zu schreiben.

3. Verwenden Sie JSONP, um domänenübergreifende Probleme zu lösen.

JSONP ist eine domänenübergreifende Lösung. Es fügt der Webseite dynamisch ein Skript-Tag hinzu und verwendet dieses Skript-Tag, um auf die domänenübergreifende Schnittstelle zuzugreifen und die entsprechenden Ergebnisse zu erhalten Das Front-End wird das Anforderungsergebnis kapseln und in einer Rückruffunktion zurückgeben, um domänenübergreifende Anforderungen zu implementieren. Die Art und Weise, wie JSONP implementiert wird, besteht darin, dass das Backend einen Teil des JavaScript-Codes zurückgibt. Dieser Code ruft eine vom Frontend definierte Rückruffunktion auf und übergibt die Daten als Parameter an die Rückruffunktion. Das Frontend erhält das Backend durch Abhören der Parameter die Callback-Funktion.

Das Folgende ist die Implementierung von JSONP:

Back-End-Code:

app.get('/jsonp', (req, res) => {
    const { data } = req.query;
    const callback = req.query.callback;
    const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
    res.end(result);
});

Front-End-Code:

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.append(script);
}

jsonp('http://localhost:3000/jsonp', function (res) {
    console.log(res);
});

3. Domänenübergreifende Übung

Übung 1: Verwenden Sie den Webpack-Dev-Server, um ProxyTable einzurichten Lösen Sie domänenübergreifende Probleme

Früher hat das End-Vue-Projekt eine Anfrage an die Back-End-API initiiert, um als Beispiel zu beschreiben, wie domänenübergreifende Probleme über das ProxyTable-Attribut des Webpack-Dev-Servers gelöst werden können.

1. Installieren Sie Webpack-Dev-Server und http-Proxy-Middleware

Installieren Sie Webpack-Dev-Server und http-Proxy-Middleware im Projekt.

npm install --save-dev webpack-dev-server http-proxy-middleware

2. Fügen Sie http-proxy-middleware in die Webpack-Konfigurationsdatei ein

const proxyMiddleware = require('http-proxy-middleware')

3. Verwenden Sie ProxyTable in der Webpack-Dev-Server-Konfiguration Port 3000.

4. Proxy-Anfrage-API verwenden

Im Vue-Projektcode müssen wir nur /api als URL-Präfix verwenden, damit die Anfrage erfolgreich an den lokalen 3000-Port weitergeleitet werden kann.

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

Übung 2: Verwenden Sie CORS, um domänenübergreifende Probleme vom Backend aus zu lösen

Wir können CORS im Backend einrichten, um domänenübergreifende Probleme zu lösen. Hier nehmen wir das Express-Framework von node.js als Beispiel zur Einführung.

1. Express installieren

Express im Projekt installieren.

axios.get('/api/users')

2. Legen Sie CORS in der server.js- oder app.js-Datei fest.

npm install express

Der obige Code legt CORS fest, sodass Anfragen von allen Quellen erfolgreich zurückgegeben werden können.

3. Fügen Sie in der Backend-API die vorherigen CORS-Einstellungen hinzu

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
});

Im obigen Code fügen wir das Access-Control-Allow-Origin-Attribut im Server-Antwortheader hinzu, um dem Browser mitzuteilen, welche Domänennamenanfragen zulässig sind.

4. Initiieren Sie eine Anfrage im Vue-Projekt.

In der Ajax-Anfrage im Vue-Projekt müssen wir die Anfrage nur auf die normale Weise initiieren.

app.get('/users', (req, res) => {
    const data = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Lily' }
    ];
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.json(data);
});

Fazit

Vues domänenübergreifendes Problem ist ein relativ häufiges Problem, aber es kann leicht gelöst werden, solange Sie die Lösung beherrschen. Bei domänenübergreifenden Problemen können wir CORS auf dem Server einrichten, das ProxyTable-Attribut von webpack-dev-server verwenden oder JSONP verwenden, um das Problem zu lösen. In diesem Artikel wird die konkrete Verwendung dieser drei Methoden durch die Praxis vorgestellt und es wird erwartet, dass die Leser in der Praxis mehr davon erfahren.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Ursachen und Lösungen für domänenübergreifende Vue-Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!