[解決済み】CORS(cross-origin resource sharing)投稿リクエストを動作させる方法
質問
私のローカル LAN にあるマシン(machineA)には、2つのウェブサーバーがあります。 1 つは XBMC に内蔵されているもので (ポート 8080)、私たちのライブラリを表示しています。 2つ目のサーバーはCherryPyのPythonスクリプト(ポート8081)で、オンデマンドでファイル変換を行うために使用しています。 ファイル変換は、XBMC サーバから提供されるページからの AJAX POST リクエストによって開始されます。
- 後藤 http://machineA:8080 ライブラリが表示されます。
- ライブラリが表示されます
- ユーザーが'convert'リンクをクリックすると、次のコマンドが発行されます。
jQuery Ajaxリクエスト
$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})
- ブラウザは、以下のヘッダを持つHTTP OPTIONSリクエストを発行します。
リクエストヘッダ - OPTIONS
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
- サーバーは次のように応答する。
レスポンスヘッダー - OPTIONS (STATUS = 200 OK)
Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
- その後、会話は停止します。 サーバーが正しい(?)CORS ヘッダー(Access-Control-Allow-Origin: *)で応答したため、ブラウザは理論上、POST リクエストを発行するはずです。
トラブルシューティングのために、同じ $.post コマンドを http://jquery.com . jquery.comからのpostリクエストは動作し、OPTIONSリクエストに続いてPOSTが送信されます。 このトランザクションからのヘッダーは次のとおりです。
リクエストヘッダ - OPTIONS
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST
レスポンスヘッダー - OPTIONS (STATUS = 200 OK)
Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
リクエストヘッダ - POST
Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache
レスポンスヘッダー - POST (STATUS = 200 OK)
Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json
同じリクエストが一方のサイトからはうまくいき、もう一方のサイトからはうまくいかないのはなぜなのかがわかりません。 どなたか、私が見落としているものを指摘していただけると幸いです。 あなたの助けをありがとうございます
解決方法は?
私は最終的にこのリンクに遭遇しました。 CORS POST リクエストはプレーンな javascript からは動作しますが、なぜ jQuery では動作しないのでしょうか? jQuery 1.5.1には、以下の機能が追加されています。
Access-Control-Request-Headers: x-requested-with
ヘッダをすべての CORS リクエストに追加する必要があります。 また、同じ質問によると、サーバー応答ヘッダーの設定は
Access-Control-Allow-Headers: *
は、レスポンスの続行を許可しません。 レスポンスヘッダに必要なヘッダが含まれていることを確認する必要があります。
Access-Control-Allow-Headers: x-requested-with
関連
-
[解決済み] Javascriptでの改行の分割方法
-
[解決済み] jQueryセレクタの直下型(>)と子孫型の違いは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない
-
[解決済み] アクセスコントロールリクエストヘッダは、jQueryでAJAXリクエストのヘッダに追加されます。
-
[解決済み] CORSです。資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できない。
-
[解決済み] FirefoxでjQuery $.ajax(), $.post がREQUEST_METHODとして "OPTIONS "を送信する問題
-
[解決済み】AngularJS がクロスオリジンリソースに対して OPTIONS HTTP リクエストを実行する場合
-
[解決済み】リクエストヘッダーフィールドのAccess-Control-Allow-Headersが許可されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQuery.addClassが動作しない。
-
[解決済み] jQuery onclick が動的に挿入された HTML 要素で発火しない?重複
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQueryで文字色を変更するにはどうすればよいですか?
-
[解決済み] クラス別のjquery onclick
-
[解決済み] jQueryで背景画像をアニメーションで変化させる
-
[解決済み] jquery autocomplete が動作しない
-
[解決済み] jQuery動的セレクタ
-
[解決済み] XMLHttpRequestが読み込めない XXX 'Access-Control-Allow-Origin' ヘッダがない
-
[解決済み] JavaScript ファイルを動的に読み込む