1. ホーム
  2. javascript

[解決済み] CORS POSTリクエストはプレーンなJavaScriptから動作しますが、なぜjQueryでは動作しないのでしょうか?

2023-03-10 23:33:57

質問

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);
}