これまで更新履歴はHTMLに手打ちで書いていましたが、数が増えてきたため、
新しく設置したスタッフブログのRSSを、#JavaScript で読み込んで表示する方式に変更しました。
その際、ブラウザのセキュリティ機能である「CORS（クロスオリジンリソース共有）」にブロックされてしまいました。
どうやら、別のドメインからデータを取得しようとすると、CORSの制限に引っかかるようです。
以下、技術的なメモ
対策として、.htaccess にCORSヘッダーを設定することで解決しました。
以下を追記すると、外部からのアクセスが許可されるようになります。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>ただし、この設定を自分のサイトの管理画面やAPIに適用すると、
外部からのアクセスが許可されてしまい、セキュリティ上のリスクがあります。
.htaccess の設定はそのファイルを置いたディレクトリ以下にのみ適用されるため、
「ブログ専用のディレクトリにだけ追加する」のであれば、基本的には安全です。
それでも不安だったので、私はローカル開発用の固定IPに限定して許可する形に変更しました。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "ここにローカル開発＋固定IPのURL（最後の / はつけない）"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>オリジンの定義
- スキーム http or https
- ホスト名 ドメイン名やIPアドレス
- ポート番号 通信に使う番号（例：8080、80、443）省略されることもある。
CORSは「オリジンが違うとブロックする」仕組み。
オリジンは「スキーム（http/https）＋ホスト名＋ポート番号」だけで構成されているので、
フォルダ名やスラッシュ(/)は含めないルールです。
Allow-Methods や Allow-Headers をあわせて指定しておくと、
fetch() での事前リクエスト（preflight）エラーが起きにくくなります。
畳む