プログラミングガール

Developing a better me

Apache|クロスオリジンなURLからのアクセスを許可する

HTML5Canvasを使用する際、クロスオリジンの画像を使うために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:全てのレスポンスを標準出力する(リクエストとレスポンスヘッダーを確認できる)