カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


jqueryの.ajaxを使った通信で
CORS(Cross-Origin Resource Sharing)対策
を行った時の通信処理関連の話。

少し特殊な環境での実装時に気づいた話なので、
あまり汎用的ではないけれど。

Photo:365.18 1 chapter down, 2 books to go By:remysharp
Photo:365.18 1 chapter down, 2 books to go By remysharp


一般的なクロスドメイン対策について


jqueryでクロスドメインな通信をしようとした時、
大きく以下、2つの対処をする必要がある。

・CORS(Cross-Origin Resource Sharing)対策をする。
・JSONP通信とする

JSONPに関しては、以前記事書いてた。
phpでクロスドメインの問題を解決する方法:なんとなしの日記phpでクロスドメインの問題を解決する方法:なんとなしの日記hatena
:カテゴリ「スポンサー広告」に関する記事。jsonファイルを使ってブログツール的なものを作ってみたところ、自分のサイトに貼り付ける分には問題なく動いていたが、別サ...


今回は、CORSで対策をした時の話。

CORS対策の時の設定について


jqueryのajaxでクロスドメインをCORS対策で通信させるとき、
以下のような設定が必要になります。

サーバ側の対策

Access-Control-Allow-Originヘッダを応答するよう設定する。
Apacheを使っていれば、Header append 等で設定すればOK。

Header append Access-Control-Allow-Origin: "http://www.example.com"


もちろんPHPやCGI側でHeaderを追加してもOK。
設定したドメインからのクロスシェアリングを許す、
という設定になります。

クライアント側の対策

リクエストパラメータにOriginヘッダを追加する

このリクエストヘッダへのOriginヘッダ追加は
jQueryで実装する上では、意識しなくても勝手に行われます。
(後述するが、恐らくブラウザが勝手にやってくれている)

プリフライト処理と実際の通信


実はここまでの設定を行う事で、実際の通信では、
プリフライトという処理が行われている。

1.クロスドメイン先のサーバにoptionsメソッドでリクエスト
2.サーバからの応答(Access-Control-Allow-Origin等)で通信可能か確認
3.改めて、GETやPOSTでクロスドメイン先にリクエスト

1、2の処理をプリフライト処理といい、
これが、jqueryでヘッダを追加するか否かで動作が異なる。

ただ、実は


通常、このプリフライト処理が行われるのが正しい仕様ではあるが、
jqueryのリクエスト時にヘッダを追加しなければ、プリフライト動作
は行われない模様。

具体的には、.ajaxにてリクエストを行い際に
settingsパラメータとして、headersやcontentTypeを
使ってリクエスト時にヘッダ情報を追加するような記載を
すると、プリフライト動作が行われるが、単純に.ajax + URL
だけでリクエストをすると行われないようだ。

jqueryのバージョンの影響かとも思いXMLHttpRequestを
使って実装しても同様の動きなので、恐らくブラウザ側の
どうさなのではないかと思われる。

参考


HTTP access control (CORS) | MDNhatena
クロスサイト HTTP リクエスト とは、要求を出すリソースが存在するドメインとは 異なるドメインの リソースに対して HTTP リクエストを行うことを指します。例えば、ド...


$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIOhatena
Ajaxリクエストを送信するオプションをキーと値のペアで指定します。

タグ : DEV jquery ajax options CORS

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...