Apache|クロスオリジンなURLからのアクセスを許可する
HTML5のCanvasを使用する際、クロスオリジンの画像を使うためにimgサーバのApacheでクロスオリジンからのアクセスを許可する必要がありました。
以下はその設定と確認方法です。
HOWTO
① Apacheの設定(/etc/httpd/conf/httpd.conf)
<Location /images/hoge> Header set Access-Control-Allow-Headers "Content-Type" Header set Access-Control-Allow-Origin "http://programming_girl.com" </Location>
hoge以下のディレクトリの画像を参照可能にします。
※ 全てのサイトを許可したい場合は *
。
② Apacheを再起動
③ curlコマンドにて確認
$ curl -H "Origin: http://programming_girl.com" --verbose http://192.168.33.6/images/hoge/ ... < HTTP/1.1 200 OK < Date: Mon, 07 Nov 2016 06:29:05 GMT < Server: Apache < Last-Modified: Mon, 07 Nov 2016 06:20:53 GMT < Accept-Ranges: bytes < Content-Length: 20 < Cache-Control: max-age=3600 < Expires: Mon, 07 Nov 2016 07:29:05 GMT < Access-Control-Allow-Origin: http://programming_girl.com < Content-Type: text/html; charset=UTF-8 < * Curl_http_done: called premature == 0 * Connection #0 to host 172.22.11.4 left intact
Access-Control-Allow-Origin: http://programming_girl.com
この部分が意図したURLになっていればOK。
これで http://programming_girl.com
から画像を呼び出すことができます。
curlコマンド Tips
-H:サードパーティのドメインをリクエストに指定する
–verbose:全てのレスポンスを標準出力する(リクエストとレスポンスヘッダーを確認できる)