So gehen Sie mit domänenübergreifenden Problemen um, wenn Vue online ist

Bei der Entwicklung von Vue-Anwendungen werden Sie auf die Trennung von Front-End und Back-End stoßen und möglicherweise auf domänenübergreifende Probleme stoßen. Bei der lokalen Entwicklung treten normalerweise keine domänenübergreifenden Probleme auf. Wenn das Projekt jedoch online geht und das Front-End und das Back-End auf unterschiedlichen Servern bereitgestellt werden, treten domänenübergreifende Probleme auf. In diesem Artikel werden wir uns eingehend mit den Hintergründen und Lösungen für das domänenübergreifende Problem von Vue online befassen, um dieses Problem besser bewältigen zu können.

Was ist domänenübergreifend?

Domainübergreifend bezieht sich auf die Verwendung domänenübergreifender Anforderungen beim Zugriff auf Ressourcen auf einem Server. Es gibt viele Arten von domänenübergreifenden Anforderungen. Zu den häufigsten gehören der domänenübergreifende Zugriff auf Ressourcen, das domänenübergreifende Schreiben von Cookies, domänenübergreifende Aufrufschnittstellen usw. Gemäß der Browser-Sicherheitsrichtlinie sind domänenübergreifende Anfragen standardmäßig verboten, da domänenübergreifende Anfragen Sicherheitsrisiken mit sich bringen können.

Lösen Sie das domänenübergreifende Problem von Vue online

1. Proxyserver

Der Proxyserver leitet die Anfrage an die Schnittstelle weiter, wenn das Frontend fordert die Hintergrundschnittstelle an. Verwenden Sie auf dem Server, auf dem sie sich befindet, die Adresse des Proxyservers als Anforderungspfad im Front-End-Code, um sicherzustellen, dass die Anforderung normal ausgeführt wird. Mithilfe eines Proxyservers kann das Front-End Anforderungen an die Schnittstelle weiterleiten, den Rückgabeinhalt der Back-End-Schnittstelle weiterleiten, den Rückgabeinhalt ändern und vor und nach der Anforderung einige Änderungsparameter oder Verarbeitungslogik hinzufügen. Die meisten Proxyserver werden von Back-End-Mitarbeitern geschrieben und können von Front-End-Projekten aufgerufen werden.

Es gibt viele Arten von Proxyservern, wie z. B. Nginx, Alibaba Cloud API Gateway, Apache usw. Wenn das Vue-Projekt online geht, verwenden Sie einen Proxyserver, um die Zugriffspfade aller Schnittstellen auf denselben Domänennamen zu verweisen. Leiten Sie beispielsweise alle Schnittstellenanforderungspfade auf „/api“ um und verwenden Sie „/api“ als Anforderungspfad. Definieren Sie dann eine Weiterleitungsregel auf dem Proxyserver, um Anfragen, die mit „/api“ beginnen, an den Server weiterzuleiten, auf dem sich die Backend-Schnittstelle befindet, um das domänenübergreifende Problem zu lösen.

Konfigurieren Sie den Proxyserver im Vue-Projekt:

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP ist eine Lösung für JavaScript und domänenübergreifende Anfragen. Der Client erstellt dynamisch das Tag <script></script>, fügt die angeforderte URL (Schnittstellenadresse) und die Rückruffunktion als Parameter hinzu und sendet die Anfrage an den Server. Nachdem der Server die Anfrage akzeptiert hat, gibt er ein JavaScript-Skript und eine Rückruffunktion zurück und übermittelt die erforderlichen Daten. Abschließend verarbeitet der Client die zurückgegebenen Daten in der Callback-Funktion. JSONP ist eine flexiblere domänenübergreifende Lösung, kann jedoch nur GET-Anfragen unterstützen und Daten nur im Nur-Text-Format anfordern.

Verwendung von JSONP in Vue-Projekten:

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS (Cross-Origin Resource Sharing) ist eine offizielle Methode zur domänenübergreifenden Nutzung Anfragen Lösung ermöglicht es dem Webanwendungsserver, eine domänenübergreifende Zugriffskontrolle durchzuführen, sodass der Browser domänenübergreifende Anforderungen sicher abschließen kann. Um CORS zu verwenden, müssen Sie nur das Feld „Access-Control-Allow-Origin“ zu den Antwortheaderinformationen im Hintergrund hinzufügen und es auf „*“ oder den angegebenen Domänennamen setzen. Anschließend verarbeitet der Browser es basierend auf dem Antwortheader Informationen zur grenzüberschreitenden Lösung von Domainanfragen.

Antwort-Header-Informationen im Hintergrund hinzufügen:

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket ist ein Vollduplex-Kommunikationsprotokoll , was eine sehr gute Rolle bei der Lösung domänenübergreifender Anfragen spielt. WebSocket führt einen Handshake über das HTTP-Protokoll durch und nachdem eine Verbindung hergestellt wurde, können Daten in beide Richtungen zwischen dem Client und dem Server übertragen werden.

Verwenden von WebSocket im Vue-Projekt:

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

Zusammenfassung

Die oben genannten sind vier Methoden zur Lösung des domänenübergreifenden Problems von Vue online: Proxy Server, JSONP, CORS und WebSocket. Verschiedene Szenarien und die Auswahl unterschiedlicher Lösungen können uns dabei helfen, die domänenübergreifenden Probleme von Vue online besser zu lösen und unsere Projekte reibungsloser zu gestalten. Es sollte daran erinnert werden, dass Sie bei der Verwendung der oben genannten Methoden auf die Sicherheit achten müssen, um einen reibungslosen Start des Projekts zu gewährleisten.

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit domänenübergreifenden Problemen um, wenn Vue online ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!