Nodejs サーバー側レンダリングフォントをダウンロードできない-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-23 18:18:08

オリジナル

435 人が閲覧しました

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

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

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

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

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

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

フォントファイルが存在しない場合、サーバーは 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 タイプの欠落

サーバー側レンダリングでは、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 サイトの他の関連記事を参照してください。