Erfahrungsaustausch bei der domänenübergreifenden Anforderungsverarbeitung in der Vue-Projektentwicklung

Mit der kontinuierlichen Entwicklung und Beliebtheit der Front-End-Technologie hat Vue als einer von ihnen immer mehr Aufmerksamkeit und Anwendungen erhalten. Bei der Entwicklung von Vue-Projekten treten häufig domänenübergreifende Anforderungsprobleme auf. Wie kann damit umgegangen werden, damit das Projekt normal ausgeführt werden kann? In diesem Artikel werden einige Erfahrungen mit der domänenübergreifenden Anforderungsverarbeitung in der Vue-Projektentwicklung basierend auf persönlichen Erfahrungen geteilt.

Was ist zunächst einmal eine domänenübergreifende Anfrage? Vereinfacht ausgedrückt können Webseiten unter einem Domänennamen nicht auf Ressourcen unter einem anderen Domänennamen zugreifen. Insbesondere wenn das Front-End und das Back-End getrennt sind und die Front-End-Anwendung (z. B. die Vue-Anwendung) eine Anfrage an die Back-End-API initiiert, werden sie eingeschränkt, da beide unter unterschiedlichen Domänennamen laufen unterliegen der Same-Origin-Richtlinie des Browsers und können nicht normal aufgerufen werden. Zu diesem Zeitpunkt müssen Sie einige Mittel verwenden, um domänenübergreifende Anforderungen zu bearbeiten.

1. Verwenden Sie einen Proxy

Eine der gängigen Methoden zur Bearbeitung domänenübergreifender Anfragen ist die Verwendung eines Proxys. Das heißt, legen Sie die Proxy-Server-Adresse in der Konfigurationsdatei der Vue-Anwendung fest, initiieren Sie zunächst eine Anfrage an den Proxy-Server und der Proxy-Server leitet sie dann an die Back-End-API weiter. Auf diese Weise kann die Front-End-Anwendung normalerweise Daten von der Back-End-API anfordern. Im Vue-Projekt können Sie in vue.config.js folgende Einstellungen vornehmen: vue.config.js中进行如下设置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '/api': '/'
        }
      }
    }
  }
}

其中，target参数指向后端API的地址，changeOrigin指示是否修改请求头中的Origin属性，pathRewrite用于重写请求路径，将以/api开头的路径替换成以/开头的路径。

二、使用JSONP

JSONP（JSON with Padding）是一种借助<script></script>标签的GET请求实现跨域请求的方法。具体实现是，在前端应用中创建一个<script></script>标签，将请求的URL设置为后端API的URL，并在URL中传递一个回调函数名，后端API在返回数据时，将数据包裹在该回调函数名的函数调用中返回，前端应用便可以通过该回调函数名获取数据了。在Vue项目中，可以通过如下方式实现JSONP请求：

export function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let params = ''
  for (let key in data) {
    params += `${key}=${data[key]}&`
  }
  url += '?' + params
  script.src = url + 'callback=' + callback
  document.body.appendChild(script)
  // 移除script标签
  script.onload = function () {
    document.body.removeChild(script)
  }
}

其中，url参数为后端API的地址，data参数为请求参数，callback参数为回调函数名。该方法通过创建一个<script></script>标签的方式发起GET请求，并将请求结果作为函数调用返回给回调函数。

三、使用CORS

CORS（Cross-Origin Resource Sharing）是一种标准的跨域请求解决方案，主要涉及浏览器和服务器之间的交互。通过在服务器端配置响应头中的Access-Control-Allow-Origin属性，可以允许前端应用跨域访问后端API。在Vue项目中，可以设置XHR请求的withCredentials属性为true，发起CORS请求。具体实现如下：

export function xhr (method, url, data, headers) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      }
    }
    xhr.open(method, url, true)
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.send(data)
  })
}

其中，method参数为请求方法，url参数为请求地址，data参数为请求参数，headers参数为请求头。该方法通过创建一个XMLHttpRequest对象，设置其withCredentialsrrreee

Darunter zeigt der Parameter target auf die Adresse der Backend-API, und changeOrigin gibt an, ob das Attribut Origin im Anforderungsheader geändert werden soll, um den Anforderungspfad neu zu schreiben und durch den Pfad zu ersetzen beginnend mit /api in einen Pfad, der mit / beginnt.

2. JSONP verwenden🎜🎜JSONP (JSON mit Padding) ist eine Methode zur Implementierung domänenübergreifender Anfragen mithilfe von GET-Anfragen mit <script></script>-Tags. Die spezifische Implementierung besteht darin, ein <script></script>-Tag in der Front-End-Anwendung zu erstellen, die angeforderte URL auf die URL der Back-End-API festzulegen und einen Rückruffunktionsnamen in der URL zu übergeben. und die Back-End-API gibt beim Empfang von Daten die Daten in den Funktionsaufruf des Rückruffunktionsnamens ein und gibt sie zurück. Die Front-End-Anwendung kann die Daten über den Rückruffunktionsnamen abrufen. Im Vue-Projekt können JSONP-Anfragen auf folgende Weise implementiert werden: 🎜rrreee🎜 Darunter ist der url-Parameter die Adresse der Back-End-API, die data Parameter ist der Anforderungsparameter und Der Rückruf Parameter ist der Name der Rückruffunktion. Diese Methode initiiert eine GET-Anfrage durch Erstellen eines <script></script>-Tags und gibt das Anforderungsergebnis als Funktionsaufruf an die Rückruffunktion zurück. 🎜🎜3. Verwenden Sie CORS🎜🎜CORS (Cross-Origin Resource Sharing) ist eine standardmäßige domänenübergreifende Anforderungslösung, die hauptsächlich die Interaktion zwischen dem Browser und dem Server umfasst. Durch die Konfiguration des Attributs Access-Control-Allow-Origin im Antwortheader auf der Serverseite kann der Front-End-Anwendung domänenübergreifend der Zugriff auf die Back-End-API gestattet werden. Im Vue-Projekt können Sie das Attribut withCredentials der XHR-Anfrage auf „true“ setzen, um eine CORS-Anfrage zu initiieren. Die spezifische Implementierung lautet wie folgt: 🎜rrreee🎜 Unter diesen ist der Parameter method die Anforderungsmethode, der Parameter url die Anforderungsadresse und der Parameter data Der Parameter code> ist der Anforderungsparameter und der Parameter <code>headers ist der Anforderungsheader. Diese Methode erstellt ein XMLHttpRequest-Objekt, setzt sein withCredentials-Attribut auf „true“, initiiert eine XHR-Anfrage und gibt das Promise-Ergebnis zurück, nachdem die Antwort abgeschlossen ist. 🎜🎜Zusammenfassend lässt sich sagen, dass das Vue-Projekt durch die Verwendung von Proxy, JSONP und CORS zur Bearbeitung domänenübergreifender Anforderungen normal mit Front-End- und Back-End-Daten interagieren kann, wodurch die Entwicklungseffizienz und die Benutzererfahrung verbessert werden. In bestimmten Anwendungen kann die geeignete Methode entsprechend den Projektanforderungen und der Back-End-API-Schnittstelle ausgewählt werden. 🎜

Das obige ist der detaillierte Inhalt vonErfahrungsaustausch bei der domänenübergreifenden Anforderungsverarbeitung in der Vue-Projektentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!