So lösen Sie den domänenübergreifenden Vue20-Proxy

Mit der kontinuierlichen Entwicklung und dem Fortschritt der Webentwicklung werden immer mehr Front-End-Technologien und Frameworks weit verbreitet. Als modernes JavaScript-Framework ist Vue.js zu einer beliebten Wahl für die Front-End-Entwicklung geworden. Im Entwicklungsprozess von Vue.js-Anwendungen ist domänenübergreifend ein häufig auftretendes Problem. In diesem Artikel werden domänenübergreifende Probleme in Vue.js 2.0 und deren Lösungen vorgestellt.

1. Was ist domänenübergreifend

Wenn bei der Entwicklung von Webanwendungen eine Seite von einer Website mit einem Domänennamen Zugriff auf Ressourcen eines anderen Domänennamens anfordert, können die Ressourcen aufgrund der Richtlinieneinschränkungen desselben Ursprungs nicht korrekt abgerufen werden Der Browser. Dies wird als domänenübergreifend bezeichnet.

Konkret ist die Same-Origin-Richtlinie das zentrale und grundlegendste Sicherheitsmerkmal des Browsers. Die Same-Origin-Richtlinie erfordert, dass zwei URLs nur dann aufeinander zugreifen dürfen, wenn sie dasselbe Protokoll, denselben Domänennamen und denselben Port haben. Andernfalls treten domänenübergreifende Probleme auf.

Laienhaft ausgedrückt: Angenommen, eine Website heißt Website A und eine andere Website heißt Website B. Wenn Website A Daten von Website B über den Browser anfordert, wird der Browser standardmäßig verwendet, da sich Website B nicht in der Domäne befindet, in der sich Website A befindet Solche Zugriffsanfragen werden abgelehnt.

2. Domänenübergreifende Probleme in Vue.js 2.0

Da es sich bei Vue.js 2.0 um eine Single-Page-Anwendung handelt, verwenden ihre Standardentwicklungs- und Produktionsumgebungen den lokalen Node.js-Server für Entwicklung und Tests. In diesem Fall treten häufig domänenübergreifende Probleme auf.

Zum Beispiel verwenden wir Axios, um Ajax-Anfragen zu senden, um JSON-Daten vom Backend-Server anzufordern. Der Code lautet wie folgt:

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Im obigen Code versuchen wir, eine Anfrage an die Adresse http:/ zu senden. Der Server von /localhost:8080/api/ data sendet eine GET-Anfrage, aber da der Browser einen solchen domänenübergreifenden Zugriff standardmäßig nicht zulässt, tritt zur Laufzeit ein Fehler auf. http://localhost:8080/api/data 的服务器发送 GET 请求，但是由于默认情况下浏览器是不允许这种跨域访问的，所以在运行的时候就会出现错误。

三、如何解决跨域问题

为了解决跨域问题，我们需要指定一个代理服务器，在本地启动该服务器，然后把所有的跨域请求都转发到该服务器上。因为代理服务器和后端服务器都在同一个域中，所以就不存在跨域问题了。

在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 中的 proxyTable 配置项来指定代理服务器。proxyTable 是一个对象，其中的每个属性都是代理规则，形如：

proxyTable: {
  '/api': 'http://localhost:9000'
}

上面的代码中，我们将以 /api 开头的所有请求都转发到地址为 http://localhost:9000 的服务器上。

四、示例代码

下面是一个关于如何使用 proxyTable 配置代理服务器的示例代码：

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

在以上代码中，我们首先需要在 Vue.js 2.0 项目根目录下添加一个 vue.config.js 文件，该文件用来配置开发环境下的服务器。在 devServer 中，我们添加了一个 proxy 属性，该属性是一个对象，里面包含了我们的代理规则。我们可以根据后台 API 的实际情况来设置代理目标地址，例如 http://localhost:9000。

我们还可以设置 pathRewrite 属性，指定请求路径的重写规则。例如，当我们的请求路径为 /api/data 时，我们可以使用 { '/api': '' } 把 /api 前缀去掉，请求路径变成了 /data。

在最后，我们还需要设置 changeOrigin 属性为 true，来允许跨域访问。然后我们就可以愉快地使用 axios 发送跨域请求了：

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

五、总结

本文介绍了 Vue.js 2.0 中的跨域问题及其解决方法。由于同源策略的限制，我们无法直接从前端应用程序中访问其他域名下的资源，但是我们可以使用代理服务器来绕过这个问题。在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 的 proxyTable

3. So lösen Sie domänenübergreifende Probleme🎜🎜Um domänenübergreifende Probleme zu lösen, müssen wir einen Proxyserver angeben, den Server lokal starten und dann alle domänenübergreifenden Anfragen an den Server weiterleiten. Da sich der Proxyserver und der Backend-Server beide in derselben Domäne befinden, gibt es kein domänenübergreifendes Problem. 🎜🎜In Vue.js 2.0 können wir das Konfigurationselement proxyTable im webpack-dev-server verwenden, um den Proxyserver anzugeben. ProxyTable ist ein Objekt und jedes Attribut darin ist eine Proxy-Regel in der Form: 🎜rrreee🎜Im obigen Code leiten wir alle Anfragen, die mit /api beginnen, an die Adresse weiter Server unter http://localhost:9000. 🎜🎜4. Beispielcode🎜🎜Das Folgende ist ein Beispielcode zur Verwendung von ProxyTable zum Konfigurieren des Proxyservers:🎜rrreee🎜Im obigen Code müssen wir zunächst eine vue.config im Stammverzeichnis von hinzufügen die .js-Datei des Vue.js 2.0-Projekts, die zum Konfigurieren des Servers in der Entwicklungsumgebung verwendet wird. In devServer haben wir ein proxy-Attribut hinzugefügt, bei dem es sich um ein Objekt handelt, das unsere Proxy-Regeln enthält. Wir können die Proxy-Zieladresse entsprechend der tatsächlichen Situation der Backend-API festlegen, z. B. http://localhost:9000. 🎜🎜Wir können auch das Attribut pathRewrite festlegen, um die Umschreiberegeln für den Anforderungspfad anzugeben. Wenn unser Anforderungspfad beispielsweise /api/data ist, können wir { '/api': '' verwenden, um /api einzufügen Das Präfix wird entfernt und der Anforderungspfad wird zu /data. 🎜🎜Am Ende müssen wir auch das Attribut changeOrigin auf true setzen, um einen domänenübergreifenden Zugriff zu ermöglichen. Dann können wir gerne axios verwenden, um domänenübergreifende Anfragen zu senden: 🎜rrreee🎜 5. Zusammenfassung 🎜🎜In diesem Artikel werden domänenübergreifende Probleme in Vue.js 2.0 und deren Lösungen vorgestellt. Aufgrund der Einschränkungen der Same-Origin-Richtlinie können wir von der Front-End-Anwendung aus nicht direkt auf Ressourcen unter anderen Domänennamen zugreifen. Wir können jedoch einen Proxyserver verwenden, um dieses Problem zu umgehen. In Vue.js 2.0 können wir das Konfigurationselement proxyTable von webpack-dev-server verwenden, um den Proxyserver anzugeben, um domänenübergreifende Probleme zu lösen. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie den domänenübergreifenden Vue20-Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!