Comment le serveur de déploiement Vue résout les problèmes inter-domaines

Vue.js est un excellent framework de développement front-end largement utilisé dans le développement d'applications Web. Il aide les développeurs à créer rapidement des applications modernes et efficaces. Cependant, dans le développement réel, nous pouvons rencontrer des problèmes inter-domaines, notamment lorsque nous déployons des applications Vue.js sur le serveur. Cet article explique comment résoudre les problèmes inter-domaines dans les applications Vue.js.

Qu’est-ce que le cross-domain ?

En termes simples, inter-domaines signifie demander des ressources à un autre site Web dans une page d'un site Web. Les problèmes inter-domaines sont principalement causés par la politique de même origine du navigateur. La politique de même origine est une politique de sécurité côté client qui empêche les applications Web d'obtenir des informations privées à partir de documents ou de scripts chargés depuis une source depuis une autre source.

Pourquoi avons-nous besoin de cross-domain ?

Dans le développement réel, nous avons souvent besoin d'accéder aux API ou aux ressources d'autres sites Web sur plusieurs domaines. Par exemple, nous pouvons avoir besoin d’obtenir des données de différents serveurs ou d’interfaces d’appel d’autres sites Web. Par exemple, dans une application Vue.js, nous devrons peut-être envoyer une requête AJAX au serveur pour obtenir des données. Si le serveur n'autorise pas les requêtes inter-domaines, les données ne pourront pas être obtenues et l'application ne fonctionnera pas correctement.

Méthodes pour résoudre les problèmes inter-domaines

1. Ajouter des informations d'en-tête CORS côté serveur

CORS (Cross-Origin Resource Sharing) est un mécanisme qui permet au navigateur d'envoyer des requêtes inter-domaines au serveur et permet au serveur pour renvoyer les requêtes inter-domaines. CORS est une norme implémentée par les navigateurs afin de pouvoir résoudre les problèmes inter-domaines pour les applications frontales.

La méthode d'ajout d'informations d'en-tête CORS côté serveur est très simple, il suffit d'ajouter des informations d'en-tête spécifiques à la réponse HTTP renvoyée. Les détails sont les suivants :

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

La signification des informations d'en-tête ci-dessus est la suivante :

• Access-Control-Allow-Origin : Spécifiez le nom de domaine autorisé. * indique que tous les noms de domaine sont autorisés, ou qu'un ou plusieurs noms de domaine peuvent être spécifiés. * 表示允许所有域名，也可以指定一个或多个域名。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法。
• Access-Control-Allow-Headers：指定允许的 HTTP 头信息。

这种方法的缺点是需要在服务器端添加头信息，如果应用程序需要访问多个不同的服务器或者 API，需要在每个服务器上都进行配置。

2. 使用 JSONP

JSONP 是一种跨域解决方案，它利用了浏览器对跨域访问 <script> 标签的支持。JSONP 的原理是将跨域请求转化为一个 <script> 标签，这个标签的 src 属性指向解决跨域的服务端程序，服务端程序返回一段 JavaScript 代码，这段代码将返回的数据以参数的形式传递给前端页面上的一个函数。

Vue.js 中使用 JSONP 的方法很简单，只需引入一个 JSONP 库，并使用 $jsonp() 方法发送 JSONP 请求即可。具体如下：

import jsonp from 'jsonp';

jsonp('https://api.example.com/data', (err, res) => {
   if (err) {
      console.error(err);
   } else {
      console.log(res);
   }
});

此方法的缺点是 JSONP 只支持 GET 请求，而且只能返回 JSON 格式的数据。

3. 使用反向代理

反向代理是一种服务器端解决跨域请求的方法。它利用了服务器之间的互联和通讯，使用服务器端的程序作为代理，将前端页面中的请求转化为后端程序的请求，从而避免了浏览器端的同源策略限制。

反向代理的实现方法很多，可以使用 Apache、Nginx 等 Web 服务器的反向代理模块，也可以使用 Node.js 中的 express 框架等实现反向代理的功能。

在 Vue.js 中使用反向代理的方法如下：

在 config/index.js 文件中添加如下代码：

module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
          target: 'http://example.com',
          changeOrigin: true,
          pathRewrite: {
              '^/api': ''
          }
      }
    }
  }
};

上述代码表示，将所有以 /api 开头的请求转发到 http://example.com，并且在请求头中加上 Origin

Access-Control-Allow-Methods : spécifiez les méthodes HTTP autorisées.

Access-Control-Allow-Headers : spécifiez les en-têtes HTTP autorisés.

L'inconvénient de cette méthode est que les informations d'en-tête doivent être ajoutées côté serveur. Si l'application doit accéder à plusieurs serveurs ou API différents, elle doit être configurée sur chaque serveur.

Utilisation de JSONP🎜🎜🎜JSONP est une solution inter-domaines qui exploite la prise en charge du navigateur pour l'accès inter-domaines à la balise <script>. Le principe de JSONP est de convertir les requêtes inter-domaines en une balise <script>. L'attribut src de cette balise pointe vers le programme serveur qui résout les problèmes inter-domaines. . Le programme serveur renvoie un paragraphe code JavaScript qui transmet les données renvoyées en tant que paramètres à une fonction sur la page frontale. 🎜🎜La méthode d'utilisation de JSONP dans Vue.js est très simple. Il suffit d'introduire une bibliothèque JSONP et d'utiliser la méthode $jsonp() pour envoyer une requête JSONP. Les détails sont les suivants : 🎜rrreee🎜L'inconvénient de cette méthode est que JSONP ne prend en charge que les requêtes GET et ne peut renvoyer que des données au format JSON. 🎜
🎜Utilisez un proxy inverse🎜🎜🎜Un proxy inverse est une méthode côté serveur permettant de résoudre les requêtes inter-domaines. Il tire parti de l'interconnexion et de la communication entre les serveurs, utilise le programme côté serveur comme proxy et convertit les requêtes de la page frontale en requêtes du programme back-end, évitant ainsi les restrictions de politique de même origine sur du côté du navigateur. 🎜🎜Il existe de nombreuses façons d'implémenter le proxy inverse. Vous pouvez utiliser le module de proxy inverse de serveurs Web tels que Apache et Nginx, ou vous pouvez utiliser le framework express de Node.js pour implémenter la fonction de proxy inverse. 🎜🎜La méthode d'utilisation du proxy inverse dans Vue.js est la suivante : 🎜🎜Ajoutez le code suivant dans le fichier config/index.js : 🎜rrreee🎜Le code ci-dessus indique que tous les fichiers se terminant par / Les requêtes commençant par api sont transmises à http://example.com, et le champ Origin est ajouté à l'en-tête de la requête pour envoyer le demande au serveur cible. Cette approche nécessite un débogage et des tests pendant la phase de développement. 🎜🎜Dans un environnement de production, nous devons configurer le proxy inverse sur le serveur. Utilisez simplement le module proxy inverse d'un serveur Web tel que Nginx ou Apache. 🎜🎜Résumé🎜🎜Lorsque les applications Vue.js sont déployées sur le serveur, l'inter-domaine est un problème courant. Cet article décrit trois façons de résoudre les problèmes inter-domaines : l'ajout d'en-têtes CORS côté serveur, l'utilisation de JSONP et l'utilisation d'un proxy inverse. Dans le développement réel, des solutions appropriées doivent être sélectionnées en fonction de différents besoins et scénarios. 🎜

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!