apacheでjsonを返す時httpヘッダを追加する

特殊なhttpレスポンスヘッダがあるとクライアントのjsからドメイン制限を無視して取得できる。apache2で設定する方法。

mod_headers.cを有効にする

サーバのjsonを置いたディレクトリに.htaccessを置き、ここに以下の記述を追加する。
(.htaccessが有効になっている必要がある。有効になってない場合はサーバの設定ファイルに直接書くか、有効にする)

ヘッダが帰ってきているかChromeで確認

Chromeで対象jsonを開き、[Ctrl]+[Shift]+Iでdevコンソールを開き「ネットワーク」タブの「All」を開く。[Ctrl]+Rと表示されたときは押す。

chromeのDEVツール。ネットワークタブでCtrl+R

ChromeのDEVツール。3xxが返ってくる

3xxが帰ってきているときは[Shift]を押しながらリロードする。

ChromeのDEVツール。200が返ってくる

対象ファイルをクリックするとヘッダが見れる。

ChromeのDEVツール。HTTPヘッダが見れる

javascriptで試す

node + vscode が前提。ここではjsonの取得にaxiosモジュールを使ってみる。

axiosのインストール

vscodeのターミナルで以下を実行。

htmlの作成

axiosで取得したjsonを表示した

リンク

このリンクのhtmlのjavascriptはhttps://jsonplaceholder.typicode.com/postsから取得している。次の例はこのサーバから取得。

.htaccessはすべてのクライアントから許可するように以下のように修正

リンク

このリンクが外部のクライアントからアクセスされた時のログは以下

サーバとクライアントとクロスサイトスクリプティングが一緒になって複雑