Die serverseitige Rendering-Schriftart von Nodejs kann nicht heruntergeladen werden

Mit der kontinuierlichen Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Herkömmliches statisches Seitenrendering kann den Anforderungen moderner Websites nicht mehr gerecht werden, und Server Side Rendering (SSR) hat sich zu einer beliebten Lösung entwickelt. Node.js ist eine sehr beliebte serverseitige Javascript-Ausführungsumgebung, mit der serverseitiges Rendering implementiert werden kann. Manchmal stoßen wir jedoch auf ein Problem, nämlich dass die serverseitige Rendering-Schriftart von nodejs nicht heruntergeladen werden kann.

Warum tritt dieses Problem auf? Während des serverseitigen Rendering-Prozesses wird ein HTML-String generiert und an den Client zurückgegeben. Der HTML-Code enthält die entsprechende Schriftart-Referenzadresse. Wenn ein Client Ressourcen für diese Schriftarten anfordert, sollte der Server in der Lage sein, korrekt zu antworten und die Datei zurückzugeben. In einigen Fällen geschieht dies jedoch nicht. In diesem Artikel werden wir die möglichen Ursachen dieses Problems untersuchen und einige Lösungen anbieten.

1. Problem mit ursprungsübergreifenden Anforderungen

Bei der Verwendung von serverseitigem Rendering treten wahrscheinlich Probleme mit domänenübergreifenden Anforderungen auf. Wenn sich die Schriftartressourcendatei und die HTML-Datei auf Servern mit unterschiedlichen Domänennamen und Ports befinden, sendet der Client eine domänenübergreifende Anfrage. Zu diesem Zeitpunkt setzt der Server den Antwortheader möglicherweise nicht richtig, was dazu führt, dass der Browser den Download der Schriftartdatei ablehnt. Nachdem Sie in Node.js die cors中间件库来解决这个问题。使用cors-Bibliothek verwenden können, müssen Sie nur noch den Antwortheader der Schriftartdatei auf der Serverseite festlegen, um domänenübergreifende Anforderungen zuzulassen, wie im folgenden Beispiel gezeigt:

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. Problem mit dem Pfad der Schriftartdatei

Beim Rendern auf der Serverseite treten häufig Probleme mit dem Pfad der Schriftartdatei auf. In der Entwicklung können entweder absolute Dateipfade oder relative Dateipfade verwendet werden. Diese Pfade können sich jedoch bei der Bereitstellung in der Produktion ändern. In diesem Fall ist es besser, einen relativen Pfad zum Stammverzeichnis der Website zu verwenden, damit der Pfad zur Schriftartendatei immer korrekt ist.

3. Die Schriftartdatei existiert nicht

Wenn die Schriftartdatei nicht existiert, gibt der Server einen 404-Fehler zurück. Derzeit kann der Client die Schriftart nicht herunterladen. In diesem Fall sollten wir prüfen, ob die Schriftartdatei vorhanden ist, und eine Fehlerbehandlung durchführen, bevor wir die Antwort an den Client senden.

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. Fehlender MIME-Typ

Beim serverseitigen Rendering kann das Problem des fehlenden MIME-Typs ebenfalls auftreten. Der MIME-Typ (Multipurpose Internet Mail Extensions) gibt den Dateityp und die Art der Verarbeitung der Datei an. Wenn der richtige MIME-Typ fehlt, erkennt der Browser den Dateityp möglicherweise nicht richtig und verhindert so den Download der Schriftart. In diesem Fall können wir die MIME-Bibliothek verwenden, um den richtigen MIME-Typ festzulegen.

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/' });
});

Kurz gesagt, wenn es ein Problem gibt, dass die serverseitigen Rendering-Schriftarten von nodejs nicht heruntergeladen werden können, sollten wir versuchen, das Problem der domänenübergreifenden Anforderung zu lösen, den Pfad der Schriftartdatei richtig festzulegen und zu behandeln die Situation, in der die Schriftartdatei nicht vorhanden ist, und legen Sie den MIME-Typ korrekt fest. Alle oben genannten Methoden können uns helfen, dieses Problem zu lösen und das serverseitige Rendering reibungsloser und effizienter zu gestalten.

Das obige ist der detaillierte Inhalt vonDie serverseitige Rendering-Schriftart von Nodejs kann nicht heruntergeladen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!