So implementieren Sie domänenübergreifend in Vue

Angesichts der kontinuierlichen Weiterentwicklung der Front-End-Technologie müssen Front-End-Ingenieure bei der Erstellung von Websites häufig Daten über Ajax-Anfragen abrufen. Bei diesem Vorgang kann es leicht zu domänenübergreifenden Problemen kommen. In diesem Artikel wird vorgestellt, wie Vue.js domänenübergreifende Anforderungen implementiert.

1. JSONP domänenübergreifend

JSONP (JSON mit Padding) ist eine Lösung für die domänenübergreifende Dateninteraktion. Die Implementierung basiert auf dem Prinzip, dass die Seite Cross-Site-Scripting laden kann.

Um domänenübergreifende JSONP-Anfragen in Vue.js zu implementieren, gibt es normalerweise zwei Methoden:

1) Skript-Tags manuell erstellen

Verwenden Sie HTTP-Bibliotheken wie axios oder Vue-resource, um domänenübergreifende Anfragen durch manuelles Erstellen von Skripten zu initiieren Tags fragen.

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Verwenden Sie das Vue.js-Plug-in jsonp

Vue.js stellt ein Plug-in namens jsonp bereit, mit dem wir domänenübergreifende JSONP-Anfragen implementieren können.

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS domänenübergreifend

CORS (Cross-Origin Resource Sharing) ist eine domänenübergreifende Ressourcenfreigabelösung, die es dem Website-Server ermöglicht, domänenübergreifenden Zugriff auf den Browser zu ermöglichen und so einige Sicherheitsprobleme des JSONP zu vermeiden Methode.

Die Verwendung domänenübergreifender CORS-Anfragen in Vue.js erfordert entsprechende Einstellungen auf der Serverseite. Die spezifische Implementierungsmethode ist wie folgt:

1) Fügen Sie das Feld „Access-Control-Allow-Origin“ im Antwortheader hinzu.

Fügen Sie das Feld „Access-Control-Allow-Origin“ im vom Server zurückgegebenen Antwortheader hinzu, um Front- zu ermöglichen. Endseitenanfragen von bestimmten Domainnamen.

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

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Senden Sie eine Anfrage in Vue.js

Senden Sie eine domänenübergreifende Anfrage über die Axios-Bibliothek in Vue.js, setzen Sie einfach withCredentials auf true.

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

Zusammenfassung

Die oben genannten sind die beiden Möglichkeiten, domänenübergreifende Anforderungen in Vue.js, JSONP und CORS zu implementieren. In der tatsächlichen Entwicklung können wir je nach spezifischen Umständen unterschiedliche Methoden anwenden. Wenn es sehr sicher ist und keine zusätzliche Serverkonfiguration erfordert, können wir die domänenübergreifende JSONP-Lösung verwenden. Wenn höhere Sicherheit und größere Flexibilität erforderlich sind, können wir die domänenübergreifende CORS-Lösung verwenden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie domänenübergreifend in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!