Wie stelle ich domänenübergreifende Anfragen in Vue?

Vue ist ein beliebtes JavaScript-Framework zum Erstellen moderner Webanwendungen. Bei der Entwicklung von Anwendungen mit Vue müssen Sie häufig mit verschiedenen APIs interagieren, die sich oft auf verschiedenen Servern befinden. Wenn eine Vue-Anwendung auf einem Domänennamen ausgeführt wird, kann sie aufgrund von domänenübergreifenden Sicherheitsrichtlinienbeschränkungen nicht direkt mit der API auf einem anderen Domänennamen kommunizieren. In diesem Artikel werden verschiedene Methoden für domänenübergreifende Anfragen in Vue vorgestellt.

1. Verwenden Sie einen Proxy

Eine gängige domänenübergreifende Lösung ist die Verwendung eines Proxys. In diesem Fall umgeht die Vue-Anwendung die Same-Origin-Richtlinie des Browsers, indem sie eine HTTP-Anfrage an denselben Server stellt. Der Server empfängt die Anfragen und leitet sie an die eigentliche API weiter. Da sich der Proxyserver in derselben Domäne wie die API befindet, erlässt der Browser diesbezüglich keine domänenübergreifenden Sicherheitsbeschränkungen. Hier ist ein Beispiel für die Einrichtung eines Proxys:

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Im obigen Beispiel leiten wir alle Anfragen, die mit /api beginnen, an https://example.comweiter > . changeOrigin wird auf true gesetzt, um die Quelle auf die Adresse von target festzulegen, und pathRewrite wird gesetzt, um / api wird aus der Anfrage entfernt. /api开头的请求代理到https://example.com上。changeOrigin设置为true表示将源设置为target的地址，并设置pathRewrite以将/api从请求中删除。

2. JSONP（仅限GET请求）

JSONP是一种旧的跨域解决方案，它使用GET请求在不同的域上动态添加一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签。通过将callback函数名作为参数传递，服务器可以将JSON数据包裹在回调函数中返回给客户端。由于脚本源不受同源策略的影响，因此浏览器不会限制从不同域返回的脚本。该方法仅适用于GET请求，因为它没有请求主体。

以下是JSONP的示例：

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

在上面的示例中，我们使用Promise来封装JSONP的请求，创建一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签并将其添加到document.head中。当服务器返回数据时，将回调函数的名称设置为window.getdata，在回调函数中删除3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，并将数据传递给resolve回调。

3. CORS

跨域资源共享（CORS）是一种现代的跨域解决方案，它允许服务器指定哪些来源（域名）有权限访问API。服务器通过返回特定的响应标头来实现此目的。当浏览器发出跨域请求时，它会在预检请求中请求服务器访问控制响应头来验证是否允许请求。如果API返回此响应头，浏览器将允许跨域请求。

以下是一个CORS的示例：

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

在上面的示例中，我们使用fetch函数来获取API数据，同时将mode设置为cors，以启用CORS。我们还在请求头中设置了Access-Control-Allow-Origin

2. JSONP (nur GET-Anfragen)

JSONP ist eine alte domänenübergreifende Lösung, die GET-Anfragen verwendet, um dynamisch ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag in verschiedenen Domänen hinzuzufügen. Durch die Übergabe des Namens der Rückruffunktion als Parameter kann der Server die JSON-Daten in die Rückruffunktion einbinden und an den Client zurückgeben. Da Skriptquellen nicht von der Same Origin-Richtlinie betroffen sind, beschränken Browser die von verschiedenen Domänen zurückgegebenen Skripte nicht. Diese Methode funktioniert nur für GET-Anfragen, da sie keinen Anfragetext hat.

Das Folgende ist ein Beispiel für JSONP: 🎜rrreee🎜Im obigen Beispiel verwenden wir Promise, um die JSONP-Anfrage zu kapseln, erstellen ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag und fügen es dem Dokument hinzu . Kopf. Wenn der Server Daten zurückgibt, legen Sie den Namen der Rückruffunktion auf window.getdata fest, entfernen Sie das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a in der Rückruffunktion und übergeben Sie die Daten an Auflösen Rückruf. 🎜🎜3. CORS🎜🎜Cross-Origin Resource Sharing (CORS) ist eine moderne domänenübergreifende Lösung, die es dem Server ermöglicht, anzugeben, welche Ursprünge (Domänennamen) berechtigt sind, auf die API zuzugreifen. Der Server tut dies, indem er bestimmte Antwortheader zurückgibt. Wenn der Browser eine Cross-Origin-Anfrage stellt, fordert er den Server Access Control-Antwortheader in der Preflight-Anfrage an, um zu überprüfen, ob die Anfrage zulässig ist. Wenn die API diesen Antwortheader zurückgibt, lässt der Browser ursprungsübergreifende Anfragen zu. 🎜🎜Das Folgende ist ein Beispiel für CORS: 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion fetch, um die API-Daten abzurufen, während wir den mode auf setzen cors , um CORS zu aktivieren. Wir legen außerdem den Header Access-Control-Allow-Origin in den Anforderungsheadern fest, der allen Ursprüngen den Zugriff auf die API ermöglicht. Beachten Sie, dass der Server diesen Header in der Antwort zurückgeben muss, damit CORS ordnungsgemäß funktioniert. 🎜🎜Fazit🎜🎜Domainübergreifende Anfragen in Vue können verschiedene Methoden wie Proxy, JSONP und CORS verwenden. Jede Methode hat ihre eigenen Vor- und Nachteile sowie anwendbaren Szenarien. Berücksichtigen Sie bei der Entscheidung für eine bestimmte Lösung die Sicherheit Ihrer API, die Komplexität Ihrer Anfragen und die Geschwindigkeit Ihrer Antworten. 🎜

Das obige ist der detaillierte Inhalt vonWie stelle ich domänenübergreifende Anfragen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!