はじめに

前回の記事：ブラウザ上でローカルLLMと対話したい#1｜テキスト入力と送信ボタン

前回はテキストを入力して、そのテキストを表示するhtmlファイルについて書いた
今回はOllamaで立てたローカルLLMサーバーにAPIリクエストを送り、返答を得ようと思ったが、その話は次回に回す

OllamaにAPIリクエストを送るのに、ローカルのhtmlファイルを開いて実行しただけでは正しく動作しなかった
そこで、簡易ローカルサーバーを立てる方法を２つメモする

生じたエラー

Ollamaサーバーにローカルファイルを開いたブラウザからAPIリクエストを送る
すると以下のエラーが発生

Access to fetch at 'http://127.0.0.1:11434/api/chat' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Chat-GPT先生による解説↓

このエラーは、ブラウザの CORS (Cross-Origin Resource Sharing) ポリシーによるものです。サーバーがリクエスト元のオリジン（ここでは null）を許可していないため、リクエストがブロックされています。

ローカルhttpサーバー

Ollamaサーバー側の設定を変更する方法もあるかもしれないが、ここではサーバーをホストすることで解決する
今回紹介するローカルhttpサーバーのホストの仕方は以下の２つ

1. Pythonを使用する
2. Node.jsを使用する

Pythonを使用する場合

ファイルがあるディレクトリに移動し、以下のコマンドを実行する

$ python3 -m http.server

（実行環境：Python3.12.7）

Serving HTTP on :: port 8000 (http://[::]:8000/) ...

上記のように表示された状態でhttp://127.0.0.1:8000にアクセスすると画面が表示される

Node.jsを使用する場合

MacOSを使っているので、Homebrewを通してNode.jsをインストールする
（Homebrewはすでにインストール済み）

$ brew install node

$ node -v
$ npm -v

上記のコマンドでバージョンが表示されれば、インストール成功

なお、バージョンをプロジェクトに応じて変更する予定がある場合、nodebrewというパッケージ管理ツールがあるそうなので、そちらを推奨（Pythonでいうpyenv的な？）

今回はそこまで深く考えずにインストールしてしまった

最後にサーバーを立てる
ファイルのあるディレクトリに移動して以下のコマンドを実行

$ npx http-server

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

上記のように表示されたら、http://127.0.0.1:8080にアクセスする
（Pythonの場合とはポート番号が違う）

おわりに

Node.jsについては素人なのでいつかは勉強しないといけないかもしれない

次回こそ、Ollamaからのレスポンスを受け取って表示する