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.
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.
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.
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.
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.
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 :
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.
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 ciblageLa demande de chemin sera transmise au serveur API. Lorsqu'une demande est envoyée par un utilisateur avec le nom de domainevotre-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部署在不同的服务器上，遇到这种情况时，我们需要做如下处理：
打包好的前端静态代码，如果没有设置publicPath，它会通过相对路径的形式引用相关资源。相对路径的导入方式会使用'./'、'../'等表示导入资源的路径标识符，而这些标识符表示的路径仅仅是相对于代码文件的。
在打包后的静态资源中，你会发现资源路径都以相对路径的方式被访问。如果你把打包后的代码直接拷贝到其他的服务器上进行访问，你会发现访问会出现问题。
为了解决这个问题，需要在打包静态文件的时候添加一个publicPath，将所有的路径改变为绝对路径。
在部署前，打开vue.config.js
vue.config.jset ajoutez une adresse publicPath. Par exemple : ##
module.exports = { publicPath: 'http://cdn.example.com/vue-app' }
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.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
