La police de rendu côté serveur Nodejs ne peut pas être téléchargée

Avec le développement continu d'Internet, le développement front-end devient de plus en plus important. Le rendu de page statique traditionnel ne peut plus répondre aux besoins des sites Web modernes, et le rendu côté serveur (SSR) est devenu une solution populaire. Node.js est un environnement d'exécution Javascript côté serveur très populaire, qui peut être utilisé pour implémenter le rendu côté serveur. Cependant, nous rencontrons parfois un problème, c'est-à-dire que la police de rendu côté serveur nodejs ne peut pas être téléchargée.

Pourquoi ce problème se produit-il ? Pendant le processus de rendu côté serveur, une chaîne HTML est générée et renvoyée au client. Le code HTML contient l'adresse de référence de police correspondante. Lorsqu'un client demande des ressources pour ces polices, le serveur doit être en mesure de répondre correctement et de renvoyer le fichier. Cependant, dans certains cas, cela ne se produit pas. Dans cet article, nous explorerons les causes possibles de ce problème et proposerons quelques solutions.

1. Problème de demande d'origine croisée

Lorsque vous utilisez le rendu côté serveur, vous êtes susceptible de rencontrer des problèmes de demande entre domaines. Lorsque le fichier de ressources de police et le fichier HTML se trouvent sur des serveurs avec des noms de domaine et des ports différents, le client enverra une requête inter-domaines. À ce stade, le serveur peut ne pas définir correctement l'en-tête de réponse, ce qui entraîne le refus du navigateur de télécharger le fichier de police. Dans Node.js, après avoir utilisé la bibliothèque cors中间件库来解决这个问题。使用cors, il vous suffit de définir l'en-tête de réponse du fichier de police côté serveur pour autoriser les requêtes inter-domaines, comme le montre l'exemple suivant :

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/fonts/:fontName', (req, res) => {
  const fontName = req.params.fontName;
  // 发送字体文件
  res.sendFile(fontName, { root: 'fonts/' });
});

app.listen(8080, () => {
  console.log('Server started on http://localhost:8080');
});

2. Problème de chemin de fichier de police

Lors du rendu côté serveur, des problèmes de chemin de fichier de police surviennent souvent. En développement, des chemins de fichiers absolus ou des chemins de fichiers relatifs peuvent être utilisés. Cependant, ces chemins peuvent changer lors du déploiement en production. Dans ce cas, il est préférable d'utiliser un chemin relatif vers la racine du site Web afin que le chemin d'accès au fichier de police soit toujours correct.

3. Le fichier de police n'existe pas

Lorsque le fichier de police n'existe pas, le serveur renvoie une erreur 404. Pour le moment, le client ne peut pas télécharger la police. Dans ce cas, nous devons vérifier si le fichier de police existe et gérer les erreurs avant d'envoyer la réponse au client.

const fontPath = path.join(__dirname, 'fonts/Roboto-Regular.ttf');

fs.access(fontPath, fs.constants.F_OK, (err) => {
  if (err) {
    console.error(`Error: Could not access file ${fontPath}`);
    res.sendStatus(404);
  } else {
    // 发送字体文件
    res.sendFile('Roboto-Regular.ttf', { root: 'fonts/' });
  }
});

4. Type MIME manquant

Dans le rendu côté serveur, le problème du type MIME manquant peut également survenir. Le type MIME (MultiPurpose Internet Mail Extensions) indique le type de fichier et la manière de traiter le fichier. Si le type MIME correct est manquant, le navigateur peut ne pas reconnaître correctement le type de fichier, empêchant ainsi le téléchargement de la police. Dans ce cas, nous pouvons utiliser la bibliothèque MIME pour nous aider à définir le type MIME correct.

const mime = require('mime');

app.get('/fonts/:fontName', (req, res) => {
  const fontName = req.params.fontName;
  const fontPath = path.join(__dirname, 'fonts/', fontName);

  // 设置字体文件的MIME类型
  res.setHeader('Content-Type', mime.getType(fontPath));

  // 发送字体文件
  res.sendFile(fontName, { root: 'fonts/' });
});

En bref, lorsqu'il y a un problème selon lequel les polices de rendu côté serveur nodejs ne peuvent pas être téléchargées, nous devrions essayer de résoudre le problème de demande inter-domaines, définir correctement le chemin du fichier de police, gérer la situation où le fichier de police n'existe pas et définissez-le correctement en type MIME. Toutes les méthodes ci-dessus peuvent nous aider à résoudre ce problème et à rendre le rendu côté serveur plus fluide et plus efficace.

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!