Nodejs サーバー側レンダリング フォントをダウンロードできない

インターネットの継続的な発展に伴い、フロントエンド開発の重要性がますます高まっています。従来の静的ページ レンダリングでは最新の Web サイトのニーズを満たすことができなくなり、サーバー サイド レンダリング (SSR) が一般的なソリューションになりました。 Node.js は非常に人気のあるサーバーサイド Javascript 実行環境であり、サーバーサイド レンダリングの実装に使用できます。ただし、場合によっては、nodejs サーバー側レンダリング フォントをダウンロードできないという問題が発生することがあります。

なぜこの問題が発生するのでしょうか?サーバー側のレンダリング プロセス中に、対応するフォント参照アドレスが含まれる HTML 文字列が生成されてクライアントに返されます。クライアントがこれらのフォントのリソースを要求すると、サーバーは正しく応答してファイルを返すことができる必要があります。ただし、場合によっては、これが起こらないこともあります。この記事では、この問題の考えられる原因を調査し、いくつかの解決策を提供します。

1. クロスドメイン リクエストの問題

サーバー側レンダリングを使用する場合、クロスドメイン リクエストの問題が発生する可能性があります。フォント リソース ファイルと HTML ファイルが異なるドメイン名とポートを持つサーバー上にある場合、クライアントはクロスドメイン リクエストを送信します。現時点では、サーバーが応答ヘッダーを正しく設定していない可能性があり、ブラウザーがフォント ファイルのダウンロードを拒否することがあります。 Node.js では、cors ミドルウェア ライブラリを使用して、この問題を解決できます。 cors ライブラリを使用した後は、次の例に示すように、サーバー側でフォント ファイルの応答ヘッダーを設定してクロスドメイン リクエストを許可するだけです。 ##フォントファイルのパス問題

2. サーバーサイドでレンダリングする際に、フォントファイルのパス問題がよく発生します。開発では、絶対ファイル パスまたは相対ファイル パスのいずれかを使用できます。ただし、これらのパスは実稼働環境にデプロイするときに変更される可能性があります。この場合、フォント ファイルへのパスが常に正確になるように、Web サイトのルートへの相対パスを使用することをお勧めします。

フォント ファイルが存在しません

3. フォント ファイルが存在しない場合、サーバーは 404 エラーを返します。現時点では、クライアントはフォントをダウンロードできません。この場合、クライアントに応答を送信する前に、フォント ファイルが存在するかどうかを確認し、エラー処理を行う必要があります。

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

MIME タイプの欠落

4. サーバー側レンダリングでは、MIME タイプの欠落の問題も発生する可能性があります。 MIME (MultiPurpose Internet Mail Extensions) タイプは、ファイルのタイプとファイルの処理方法を示します。正しい MIME タイプが欠落している場合、ブラウザはファイルのタイプを正しく認識できない可能性があり、フォントをダウンロードできません。この場合、MIME ライブラリを使用して、正しい MIME タイプを設定できます。

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

つまり、nodejs サーバー側レンダリング フォントをダウンロードできないという問題が発生した場合、クロスドメイン リクエストの問題を解決し、フォント ファイルのパスを正しく設定し、状況に対処する必要があります。フォント ファイルが存在しない場合は、MIME タイプを正しく設定してください。上記のすべての方法は、この問題を解決し、サーバー側のレンダリングをよりスムーズかつ効率的にするのに役立ちます。

以上がNodejs サーバー側レンダリング フォントをダウンロードできないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。