Lassen Sie uns über die Ursachen und Lösungen der domänenübergreifenden Fehlerberichterstattung von Vue Router sprechen

Die domänenübergreifende Fehlerberichterstattung von Vue Router ist ein sehr häufiges Problem. Wenn Sie Vue Router für das Routing verwenden und domänenübergreifend auf eine andere Website oder API zugreifen, tritt ein domänenübergreifender Fehler auf. In diesem Artikel werden die Ursachen und Lösungen für domänenübergreifende Fehler im Vue Router vorgestellt.

1. Domänenübergreifende Gründe

In Browsern ist die Same-Origin-Richtlinie ein Sicherheitsmechanismus, der JavaScript auf einer Website darauf beschränkt, nur auf Ressourcen unter dieser Website zuzugreifen. Die Same-Origin-Richtlinie erlaubt keinen domänenübergreifenden Zugriff auf Daten in anderen Domänen über Skripte, z. B. die Verwendung von Ajax auf einer Seite unter einem Domänennamen, um eine API-Schnittstelle unter einem anderen Domänennamen aufzurufen. Dies liegt daran, dass dies zu Sicherheitsproblemen führt und es Angreifern ermöglicht, vertrauliche Informationen der Benutzer durch domänenübergreifendes Scripting zu stehlen.

2. Domänenübergreifende Fehlerberichterstattung von Vue-Router

Vue-Router-Routing basiert auf dem Browser und ist daher auch durch die Same-Origin-Richtlinie eingeschränkt. Wenn wir Vue Router in einer Vue-Komponente verwenden, um auf eine andere Site oder API-Schnittstelle zuzugreifen, tritt ein domänenübergreifender Fehler auf. Die Fehlermeldung lautet im Allgemeinen:

Der Zugriff auf XMLHttpRequest unter „http://xxxxxx“ vom Ursprung „http://localhost:8080“ wurde durch die CORS-Richtlinie blockiert: Es ist kein Header „Access-Control-Allow-Origin“ vorhanden auf der angeforderten Ressource.

Dieser domänenübergreifende Fehler führt zu einem CORS-Fehler, da der Browser Anfragen auf andere Domänennamen beschränkt und andere Websites keine domänenübergreifenden Anfragen für die Ressourcen Ihrer Website zulassen. Wenn Sie einen lokalen Server verwenden, kann dieses Problem auftreten, da Ihr Server möglicherweise nicht mit CORS konfiguriert ist, was für domänenübergreifende Anforderungen des Vue Routers erforderlich ist.

3. Methoden zur Lösung domänenübergreifender Fehlerberichte

1. Back-End-Proxy verwenden

Back-End-Proxy kann domänenübergreifende Einschränkungen umgehen. Durch das Senden einer Anfrage an eine andere Site und den Empfang einer Antwort vervollständigt der Server die Anfrage und Antwort und verarbeitet die angeforderten Ressourcen bzw. Antwortdaten. Im Frontend-Code senden wir die Anfrage einfach an die URL des Backend-Proxys und dann senden wir im Backend-Proxy die Anfrage an die Ziel-URL und senden die empfangene Antwort an das Frontend zurück. Das Folgende ist ein Beispielcode:

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. Cors konfigurieren

Wenn Sie über den Browser direkt auf domänenübergreifende APIs oder Ressourcen zugreifen möchten, können Sie die CORS des Servers selbst konfigurieren. Legen Sie den Access-Control-Allow-Origin-Header auf dem Server fest, um Cross-Origin-Anfragen zuzulassen. Hier sind einige gängige CORS-Konfigurationsbeispiele:

• Node.js (Express):

  R

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

  E

• APACHE:

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

  EE

• nginx:

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

  E

4, Zusammenfassung.

V ue Router Cross-Domain-Fehler ist Der domänenübergreifende Fehler ist ein sehr häufiges Problem. Bei der Entwicklung mit dem Vue.js-Framework kann ein tiefes Verständnis des Problems dazu beitragen, domänenübergreifende Probleme zu lösen und CORS-Fehler zu vermeiden Verbessern Sie nicht nur die Entwicklungseffizienz, sondern verbessern Sie auch effektiv die Codequalität. Die oben genannten Gründe sind die Gründe für domänenübergreifende Fehler, die von Vue Router und den beiden Lösungen gemeldet werden.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Ursachen und Lösungen der domänenübergreifenden Fehlerberichterstattung von Vue Router sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!