[解決済み] CORS POSTリクエストはプレーンなJavaScriptから動作しますが、なぜjQueryでは動作しないのでしょうか?
質問
Cross Originの投稿リクエストを作成しようとしています。
JavaScript
のようにします。
var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);
しかし、私は
jQuery
を使いたいのですが、うまくいきません。これは私が試していることです。
$.ajax(url, {
type:"POST",
dataType:"json",
data:{action:"something"},
success:function(data, textStatus, jqXHR) {alert("success");},
error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});
この結果、Failureになります。もし誰かが、なぜ
jQuery
がうまくいかない理由を知っている人がいたら、みんなに教えてください。ありがとうございます。
(私が使っている
jQuery
1.5.1 と Firefox 4.0 を使用しており、サーバーは適切な
Access-Control-Allow-Origin
ヘッダで応答しています)。
どのように解決するのですか?
UPDATE: TimKが指摘したように、これはもうjquery 1.5.2で必要ありません。しかし、カスタムヘッダーを追加したり、クレデンシャル(ユーザー名、パスワード、またはクッキーなど)の使用を許可したい場合は、続きをお読みください。
私は答えを見つけたと思います! (4 時間と多くの罵倒の後)
//This does not work!!
Access-Control-Allow-Headers: *
受け入れるすべてのヘッダを手動で指定する必要があります (少なくとも、FF 4.0 & Chrome 10.0.648.204 では、これが私の場合でした)。
jQueryの$.ajaxメソッドは、すべてのクロスドメインリクエストに対して"x-requested-with"ヘッダーを送信します(私はクロスドメインのみと思います)。
つまり、OPTIONSリクエストに応答するために必要なヘッダが足りないということです。
//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with
もし、quot;simple" 以外のヘッダを渡している場合は、それらをリストに含める必要があります (私はもう一つ送ります)。
//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by
というわけで、まとめると、私のPHPはこんな感じです。
// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Max-Age: 604800');
//if you need special headers
header('Access-Control-Allow-Headers: x-requested-with');
exit(0);
}
関連
-
[解決済み] jQueryやJavaScriptを使用してURLパラメータを取得するには?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] file:// URLから実行されるアプリケーションのリクエストで、"Origin null is not allowed by Access-Control-Allow-Origin" エラーが発生する。
-
[解決済み】PHPによるjQuery Ajax POSTの例
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] Angularjs - 現在の日付を表示する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CORS(cross-origin resource sharing)投稿リクエストを動作させる方法
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?