Basic 認証のかかったウェブ API に対して、別のドメインから jQuery.ajax() でアクセスしようとして、えらく時間がかかりました。
サーバに
- Access-Control-Allow-Origin: http://example.com
- Access-Control-Allow-Methods: GET, POST, OPTIONS
- Access-Control-Allow-Headers: Origin, Authorization, Accept
- Access-Control-Allow-Credentials: true
をヘッダで返してもらうようにしたら、うまくいきました。が、これはただのコピペ。
それぞれ、何の意味を持つヘッダなのかが、 HTTP access control による、Cross-Origin Resource Sharing の解説に書かれています。
Access-Control-Allow-Origin
HTTP サーバに対して、 JavaScript からアクセスしてもよいドメインを指定する。Ajax で same origin 問題で検索すると、たいてい、このヘッダについて言及がある。ここまではよろしい。
ブラウザは、実際に GET や POST する前に、プリフライトリクエストというリクエストを発行します。通常これは OPTIONS メソッドです。で、このときのレスポンスヘッダをみて、ブラウザは呼び出す/呼び出さないを決定します。以下、同じく概要。
Access-Control-Allow-Methods
発行してもよいメソッドのリスト。OPTIONS と GET しか許さない場合には、OPTIONS, GET など。
Access-Control-Allow-Headers
サーバに送信してもいいヘッダのリスト。認証情報は Authorization ヘッダに書かれるので、このヘッダに Authorization が記載されている必要がある。
Access-Control-Allow-Credentials
名前だけみると上の Authorization と冗長な気がするんだけれど、こっちは cookie を送っていいかどうかのフラグ。
ブラウザによって、できたり/できなかったりして、いまだに確信が持てない。
