Vue se déploie en ligne pour résoudre des problèmes inter-domaines

Vue.js est un framework JavaScript populaire pour créer des applications à page unique (SPA). Lors du développement d'applications Vue, vous pouvez rencontrer des problèmes inter-domaines. Les problèmes inter-domaines empêchent souvent les navigateurs de charger des ressources provenant de différentes origines. En fait, lors du déploiement d'applications Vue, les problèmes inter-domaines peuvent devenir des goulots d'étranglement à bien des égards. Cet article présentera le déploiement de Vue.js tout en se concentrant sur la façon de résoudre les problèmes inter-domaines.

Qu'est-ce que le cross-domain ?

Dans le navigateur, lorsqu'un script est exécuté dans l'arborescence des documents d'une page Web, le script exécuté peut accéder à n'importe quelle partie de l'arborescence des documents. Cependant, des problèmes inter-domaines surviennent lorsque l’on tente d’accéder à des ressources provenant de différentes sources.

Source

La source fait référence au serveur ou au client du réseau, qui peut être une adresse IP, un nom de domaine ou un numéro de port. Le navigateur détermine si deux URL sont identiques en comparant les composants de la source pour déterminer si elles appartiennent à plusieurs domaines.

Par exemple, disons que nous avons les URL suivantes :

http://www.example.com/page1
https://www.example.com/page2
http://www.example.com:8080/page3

Chacune d'entre elles contient trois composants : le protocole, l'hôte et le numéro de port. Dans cet exemple, les première et troisième URL ont le même protocole et le même hôte, mais leurs numéros de port sont différents. En raison des différents numéros de port, ces URL sont considérées comme des sources différentes.

cross domain

Lorsqu'un script JavaScript tente d'accéder à des ressources provenant d'autres sources, le navigateur bloquera l'exécution du script en fonction de la même politique d'origine. Les navigateurs pensent que cela empêchera les scripts malveillants de voler des données.

Par exemple, si le code JavaScript d'un composant dans une application Vue.js tente d'accéder à une API depuis une autre source, l'application fera une requête d'origine croisée au navigateur. Si les problèmes d'origine croisée ne sont pas résolus, les navigateurs empêcheront les applications de charger les ressources requises à partir d'autres sources.

Résoudre les problèmes inter-domaines

Pour résoudre les problèmes inter-domaines des applications Vue.js, vous devez prendre en compte plusieurs aspects : API back-end inter-domaines, front -end ressources statiques packagées inter-domaines, etc., examinons-les séparément.

Backend API cross-domain

Dans une application Vue.js, l'API doit interagir avec l'application front-end. Si ces API se trouvent dans des domaines différents, une opération inter-domaines doit être effectuée. Vous pouvez résoudre ce problème par les méthodes suivantes :

1. En définissant l'en-tête HTTP Access-Control-Allow-Origin

côté serveur API en définissant Access-Control- En-tête Allow-Origin, spécifiant l’adresse d’un serveur proxy inverse de confiance au navigateur peut résoudre les problèmes inter-domaines.

Access-Control-Allow-Origin L'en-tête HTTP identifie les noms de domaine approuvés par le serveur. Si cet en-tête contient l'adresse demandée au client, le serveur API autorisera le passage de la requête.

Access-Control-Allow-Origin: http://your-domain.com/

Pour permettre à tous les noms de domaine d'accéder à l'API, vous pouvez utiliser des caractères génériques :

Access-Control-Allow-Origin: *

Cette solution est très simple, mais elle est très contraignante et ne convient pas à la plupart programme.

2. Ajoutez un serveur proxy inverse

Pour mieux contrôler quelles requêtes peuvent passer par le proxy inverse, vous pouvez utiliser un serveur proxy inverse, tel que Nginx. Un serveur proxy inverse est utilisé pour obtenir des données d'un serveur distant (tel qu'un serveur API) et les renvoyer au client.

Lors de l'utilisation d'un proxy inverse, le serveur API ne sera pas exposé à Internet. Au lieu de cela, le client enverra une demande au proxy inverse et en obtiendra des données. Un serveur proxy inverse contrôle quelles requêtes transitent par le pipeline de requêtes.

Par exemple, pour une certaine API d'une application Vue.js, vous pouvez définir la configuration de serveur Nginx suivante :

location /api/ {
   proxy_pass http://your-api-server.com/;
   add_header 'Access-Control-Allow-Origin' 'http://your-domain.com/';
}

Les paramètres ci-dessus spécifient que tout ciblage La demande de chemin sera transmise au serveur API. Lorsqu'une demande est envoyée par un utilisateur avec le nom de domaine votre-domaine.com, le serveur proxy inverse autorisera le passage de la demande. Seules les demandes provenant de ce domaine seront autorisées. Les autres noms de domaine seront rejetés. /api/*路径的请求将转发到API服务器上。当从域名为your-domain.com的用户发送的请求时，反向代理服务器将允许请求通过。只有来自这个域名的请求才会被允许。其他域名将被拒绝。

前端应用部署后打包静态资源跨域

Vue.js应用程序在生产环境中会被打包为静态文件，并且会在应用程序所在的服务器上进行部署。如果你的前端应用和API部署在不同的服务器上，遇到这种情况时，我们需要做如下处理：

1. 在Vue的配置文件中添加publicPath

打包好的前端静态代码，如果没有设置publicPath，它会通过相对路径的形式引用相关资源。相对路径的导入方式会使用'./'、'../'等表示导入资源的路径标识符，而这些标识符表示的路径仅仅是相对于代码文件的。

在打包后的静态资源中，你会发现资源路径都以相对路径的方式被访问。如果你把打包后的代码直接拷贝到其他的服务器上进行访问，你会发现访问会出现问题。

为了解决这个问题，需要在打包静态文件的时候添加一个publicPath，将所有的路径改变为绝对路径。

在部署前，打开 vue.config.js

Une fois l'application frontale déployée, les ressources statiques sont regroupées dans tous les domaines

L'application Vue.js sera regroupée sous forme de fichier statique dans l'environnement de production et sera être sur le serveur où se trouve l'application Déployer. Si votre application front-end et votre API sont déployées sur des serveurs différents, lorsque nous rencontrons cette situation, nous devons procéder comme suit : #🎜🎜##🎜🎜#1 Ajoutez publicPath#🎜🎜## au fichier de configuration Vue 🎜🎜. #Code statique frontal packagé, si publicPath n'est pas défini, il référencera les ressources associées via des chemins relatifs. La méthode d'importation de chemin relatif utilisera './', '../', etc. pour représenter les identifiants de chemin des ressources importées, et les chemins représentés par ces identifiants sont uniquement relatifs aux fichiers de code. #🎜🎜##🎜🎜#Dans les ressources statiques packagées, vous constaterez que les chemins de ressources sont accessibles en tant que chemins relatifs. Si vous copiez le code packagé directement sur d'autres serveurs pour y accéder, vous constaterez qu'il y aura des problèmes d'accès. #🎜🎜##🎜🎜#Afin de résoudre ce problème, vous devez ajouter un publicPath lors du packaging des fichiers statiques et remplacer tous les chemins par des chemins absolus. #🎜🎜##🎜🎜#Avant le déploiement, ouvrez le fichier vue.config.js et ajoutez une adresse publicPath. Par exemple : #🎜🎜#

module.exports = {
    publicPath: 'http://cdn.example.com/vue-app'
}

#🎜🎜#Cette configuration indique à Webpack de configurer publicPath comme adresse personnalisée lors de la génération de ressources statiques, de sorte que lors de l'accès à d'autres noms de domaine, le code puisse être chargé directement via les ressources CDN, résolvant ainsi le problème de problème de demandes de ressources inter-domaines. #🎜🎜#

2. Définir des règles CORS

Lorsque les ressources statiques et les ressources API sont sous le nom de domaine CDN, vous devez définir des règles CORS au lieu d'utiliser le proxy inverse Nginx, car Nginx dans ce cas là est généralement une couche d’accélération CDN.

Définissez les règles CORS inter-domaines sur la console CDN, activez l'en-tête Access-Control-Allow-Origin, autorisez le code frontal à accéder aux ressources statiques et résolvez le problème de cross- accès aux ressources du domaine.

Conclusion

Lors du développement d'applications Vue.js, la résolution des problèmes inter-domaines est une étape importante. Cet article explique comment résoudre les problèmes inter-domaines dans Vue.js. Nous avons besoin de différentes solutions inter-domaines pour différents scénarios. En comprenant et maîtrisant les problèmes inter-domaines, nous pouvons améliorer efficacement les performances et la fiabilité des applications Vue.js.

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!