web-dev-qa-db-fra.com

Pourquoi Bootstrap essaie-t-il de charger MOINS de fichiers dans Edge?

J'ai une page Web utilisant Twitter Bootstrap. Cela fonctionne bien dans Chrome, Firefox et Safari. Cependant, lorsque j'essaie de le visualiser dans Edge sur Windows 10, j'obtiens un tas d'erreurs 403 disant qu'il n'a pas réussi à charger une multitude de fichiers .less à partir du CDN Bootstrap. Pourquoi sont .less fichiers demandés si le navigateur ne peut rien faire avec eux? Je n'utilise pas du tout MOINS, juste du CSS3 ordinaire, ce qui fonctionne très bien. Comment faire pour que cela s'arrête?

Deluge of unnecessary LESS file requests

csstwitter-bootstraplessmicrosoft-edge
28
huertanix

La bonne nouvelle est que cela n'affectera pas les utilisateurs réguliers du site. La mauvaise nouvelle est que cela se produit également dans Chrome dans une certaine mesure, c'est juste que l'onglet réseau dans Chrome ne signale pas les erreurs 403).

Dans le fichier CSS auquel vous vous connectez, il y a une ligne au bas du fichier:

/*# sourceMappingURL=bootstrap.min.css.map */

Il s'agit des cartes source et donne des liens vers tous les fichiers source utilisés pour générer le CSS minifié qui se trouve dans votre navigateur.

Dans l'instance bootstrap le CDN pointe vers des fichiers qui n'existent pas tels que http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/scaffolding .less

Le fichier de carte source ne sera téléchargé que si vous avez activé les cartes source et que vos outils de développement sont ouverts. Edge définit les cartes sources par défaut et pour autant que je sache, il n'y a aucun moyen de les désactiver (mais rappelez-vous que cela ne se produira que lorsque les outils de développement sont ouverts, j'ai confirmé ce comportement en utilisant Fiddler), donc lorsque vous appuyez sur f12, il est va essayer de récupérer les fichiers mappés source. Chrome fonctionne légèrement différemment, il téléchargera la carte source mais n'essaiera pas de télécharger le fichier .less tant que vous n'aurez pas accédé au fichier source.

Si l'un des fichiers .less renvoie une réponse 403 interdite, Edge le signale dans l'onglet réseau. Chrome n'est pas le cas.

Si vous utilisez un débogueur http tel que Fiddler, vous verrez que Chrome demande effectivement les fichiers et obtient également une réponse 403, cependant, il ne le signale pas sur l'onglet réseau. Lorsque vous utilisez Fiddler pour contourner le problème https, j'ai changé le fichier CSS pour pointer vers l'URL non https. Par exemple: http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =

Le correctif de ce problème consiste à corriger les fichiers qui se trouvent dans la carte source. J'ai soulevé un problème sur le bootstrap maxcdn GitHub repro: https://github.com/MaxCDN/bootstrap-cdn/issues/629

37
Martin Beeby

Il existe un problème connu avec MaxCDN lui-même. (et CDNjs également)

Problèmes enregistrés pour référence:

Analyse CDN:

Pour sourceMappingURL qui est bootstrap.min.css.map pour fichier d'amorçage , l'un des .less les fichiers d'extension (par exemple ce fichier ) ne parviennent pas à se charger avec l'état HTTP 403 (interdit).

Chrome supprime ce problème dans la console du développeur, contrairement à Edge. Le problème lors de l'accès aux fichiers .less est reproductible en accédant au lien this .

Ce problème est non seulement avec MaxCDN , mais aussi avec CDNjs . Les liens pour CDNjs sont this , this & this

1
student