フロントHTMLを作成中に表示されたJS周りのエラーメッセージと、OLLAMA周りのエラーメッセージの紹介と対応方法について記載します。
●環境
Windows11 HOME
LLM Ollama 0.1.47(model llama2)
●エラーメッセージ一覧
| 種別 /エラーメッセージ /症状 | 症状と対応方法 |
| HTML/ 文字が化ける | 適切な文字コードで保存し、charsetを指定する 「縺�■縺ｮ雉｢縺�ｭ�」等 HTMLのヘッダー領域に <meta charset=”UTF-8″> を追加 |
| JS/警告/ A ‘viewport’ meta element was not specified. | headの中でviewportが指定されていない ①画面に応じた最大サイズのビューポートを使う <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ②ビューポートの幅を一定のサイズにする <meta name=”viewport” content=”width=360,initial-scale=1″> |
| JS/警告/ <html>element must have a lang attribute: The <html>element does not have a lang attribute | <!DOCTYPE html>の次の行(HTMLの２行目)に <html lang=”ja”>を追加する |
| JS/警告/ A ‘cache-control’ header is missing or empty. | webサーバからのリクエストにキャッシュ制御ヘッダーが含まれていないのが原因 ①相手サーバの設定が変更できる apacheなら confファイルに次の設定を追加し、レスポンスキャッシュの保存期間を追加する ※サーバ上でレスポンスキャッシュを１８０秒間保持する <IfModule mod_headers.c> <Header set Cache-Control “max-age=180, public”> </IfModule > ②相手サーバの設定が変更できない 設定変更できないサーバ（Ollama含む）は、現時点で対応策なし |
| JS/警告/ The target should not be cached or have a ‘cache-control’ header with ‘max-age=180’ or less. | レスポンスキャッシュの保持期間が最大値（180）を超えているのが原因 apache のconfファイルから、レスポンスキャッシュの保存期間を最大値以下にする <IfModule mod_headers.c> <Header set Cache-Control “max-age=180, public”> </IfModule > |
| JS/警告/ CSS inline styles should not be used, move styles to an external CSS file | インラインスタイルを使用しないでCSSを使って書いてという警告 ●悪い例 <div id=”tes” style=”background-color:#C0C0C0;width:100px;”></div> ●よい例 <style> server-status { background-color: #C0C0C0; width: 100px;} </style> <div id=”tes” ></div> |
| JS/エラー/ Form elements must have labels: Element has no title attribute Element has no placeholder attribute | フォームの要素にはラベルが必要 ●悪い例 <input type=”text” size=”50px” id=”question” name=”question” required> ●よい例 <label for=”question”>質問:</label> <input type=”text” size=”50px” id=”question” name=”question” required> |
| JS/エラー/ Failed to load resource: net::ERR_CONNECTION_REFUSED | コネクションの取得に失敗している サーバが反応しない、あるいはORIGIN等の規制でコネクションが取得できていない curlコマンドでレスポンスの反応を確認して、サーバが起動しているか確認する ●サーバが見つからない C:\Windows\System32>curl http://192.168.0.45:11434/ curl: (7) Failed to connect to 192.168.0.45 port 11434 after 2009 ms: Couldn’t connect to server ●サーバは見つかる サーバのORIGIN制約を確認する |
| JS/エラー/ Ensure CORS response header values are valid 開発タブ上で 要求 状態 プレフライトリクエスト (問題がある場合) ヘッダー 問題 値が無効です (使用可能な場合) 192.168.0.45:11434/ ブロック Access-Control-Allow-Origin ヘッダーがありません と表示される | クロスオリジン制約に違反しています APIサーバの設定変更で対応できます Ollamaサーバの場合 ollamaの環境変数に OLLAMA_ORIGINS=* を設定する 192.168.0.*,192.* どちらもORIGIN制約にブロックされます。 unix版では出ていないみたいなのでwindows版だけのバグかもしれません |
| コマンドプロンプトからollamaが起動しない | ①ログを確認 C:\Users\ユーザ名\AppData\Local\Ollama\server.log を確認すると、起動しない理由が書かれています 例）エラーメッセージ panic: bad origin: origins must contain ‘‘ or include http://,https://,chrome-extension://,safari-extension://,moz-extension://,ms-browser-extension:// （OLLAMA_ORIGINS=）にが入っていないとエラーになって起動しない C:\ >ollama serve Error: listen tcp 0.0.0.0:11434: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted. OLLAMAを複数起動することはできません タスクマネージャーから、すでに起動しているOLLAMAを終了させてください |
| JS/エラー/ Response should include ‘x-content-type-options’ header. JS/警告/ Resource should use cache busting but URL does not match configured patterns. | 今のところ相手がOLLAMAだと修正不能 Ollamaサーバでレスポンスヘッダを修正する方法がない（わからない）為 |
何度も同じことを調べないための備忘録です。
