Comment faire des requêtes cross-domaines dans Vue ?

Vue est un framework JavaScript populaire pour créer des applications Web modernes. Lors du développement d'applications à l'aide de Vue, vous devez souvent interagir avec différentes API, qui sont souvent situées sur des serveurs différents. En raison des restrictions des politiques de sécurité inter-domaines, lorsqu'une application Vue s'exécute sur un nom de domaine, elle ne peut pas communiquer directement avec l'API sur un autre nom de domaine. Cet article présentera plusieurs méthodes pour effectuer des requêtes inter-domaines dans Vue.

1. Utilisez un proxy

Une solution inter-domaines courante consiste à utiliser un proxy. Dans ce cas, l'application Vue contourne la politique de même origine du navigateur en effectuant une requête HTTP au même serveur. Le serveur reçoit les requêtes et les transmet à l'API réelle. Étant donné que le serveur proxy se trouve sur le même domaine que l'API, le navigateur n'émettra pas de restrictions de sécurité inter-domaines à ce sujet. Voici un exemple de la façon de configurer un proxy :

// vue.config.js

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

Dans l'exemple ci-dessus, nous allons proxy toutes les requêtes commençant par /api vers https:// exemple.comon. changeOrigin est défini sur true pour définir la source sur l'adresse de target et définir pathRewrite pour modifier / api est supprimé de la requête. /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 (requêtes GET uniquement)

JSONP est une ancienne solution inter-domaines qui utilise les requêtes GET pour ajouter dynamiquement un 3f1c4e4b6b16bbbd69b2ee476dc4f83a Balise . En passant le nom de la fonction de rappel en paramètre, le serveur peut envelopper les données JSON dans la fonction de rappel et les renvoyer au client. Étant donné que les sources de script ne sont pas affectées par la politique de même origine, les navigateurs ne limitent pas les scripts renvoyés par différents domaines. Cette méthode ne fonctionne que pour les requêtes GET car elle n'a pas de corps de requête.

Ce qui suit est un exemple de JSONP : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons Promise pour encapsuler la requête JSONP et créer un 3f1c4e4b6b16bbbd69b2ee476dc4f83a code > balise et ajoutez-la à <code>document.head. Lorsque le serveur renvoie des données, définissez le nom de la fonction de rappel sur window.getdata, supprimez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans la fonction de rappel et transmettez les données à résoudre rappel. #🎜🎜##🎜🎜#3. CORS#🎜🎜##🎜🎜#Le partage de ressources d'origine croisée (CORS) est une solution inter-domaines moderne qui permet au serveur de spécifier à quelles origines (noms de domaine) sont autorisés à accéder. l'API. Le serveur fait cela en renvoyant des en-têtes de réponse spécifiques. Lorsque le navigateur effectue une requête d'origine croisée, il demande l'en-tête de réponse Server Access Control dans la requête de contrôle en amont pour vérifier si la requête est autorisée. Si l'API renvoie cet en-tête de réponse, le navigateur autorisera les requêtes d'origine croisée. #🎜🎜##🎜🎜#Ce qui suit est un exemple de CORS : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons la fonction fetch pour obtenir les données de l'API, et à en même temps, mode est défini sur cors pour activer CORS. Nous définissons également l'en-tête Access-Control-Allow-Origin dans les en-têtes de requête, ce qui permet à toutes les origines d'accéder à l'API. Notez que pour que CORS fonctionne correctement, le serveur doit renvoyer cet en-tête dans la réponse. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Vous pouvez utiliser diverses méthodes telles que proxy, JSONP et CORS pour effectuer des requêtes inter-domaines dans Vue. Chaque méthode a ses propres avantages, inconvénients et scénarios applicables. Lorsque vous choisissez d'utiliser une solution spécifique, tenez compte de la sécurité de votre API, de la complexité de vos demandes et de la rapidité de vos réponses. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!