web-dev-qa-db-ja.com

FormDataを使用してXMLHttpRequestを送信する

JavaScriptでXHRを作成しようとしていますが、正しく機能しません。

Chrome開発者ツール]の[ネットワーク]タブに適切なリクエストが表示されると、「フォームデータ」セクションがありますすべての情報が一覧表示されます。次のように、リクエストとともに送信されます。

formdata

今、私は自分のXMLHttpRequestを私が知っている方法で作成しようとしましたが、その結果を得ることができません。

私はこれを試しました：

var xhr = new XMLHttpRequest(),
    form_data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";
    // this is uri encoded: %5b = [ and %5D = ]

xhr.open('POST','https://www.somesite.com/page?' + form_data, false);
xhr.send();

しかし「フォームデータ」の代わりにこの「クエリ文字列パラメータ」を取得しました:

querystringparameters

私もこれを試しました：

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append("data[tumblelog]", "drunknight");
formData.append("data[source]", "FOLLOW_SOURCE_REBLOG");
xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(formData);

しかし「フォームデータ」の代わりにこの「リクエストペイロード」を取得しました：

payload

そして最後に私はこれを試しました：

var xhr = new XMLHttpRequest(),
    formData = {
        "data[tumblelog]": "drunknight",
        "data[source]": "FOLLOW_SOURCE_REBLOG"
    };

xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(JSON.stringify(formData));

しかし「フォームデータ」の代わりに別の「リクエストペイロード」を取得しました：

payload2

今、私の質問は：

最初の画像に示されているのと同じ結果を得るためにXMLHttpRequestを送信するにはどうすればよいですか？

javascriptajaxxmlhttprequestform-data
11
Marco Bonelli

データがフォームのようにエンコードされていることを指定するためのContent-Typeヘッダーがありません。

これは機能します：

var xhr = new XMLHttpRequest(),
    data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";

xhr.open('POST','https://www.somesite.com/page', false);

// LINE ADDED
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);

編集

FormDataは通常、バイナリデータの送信に使用され、Content-Typeヘッダーをmultipart/form-dataに自動的に設定します（ FormData Spec および FormDataの例 を参照） =）。ただし、サーバーがこのMIMEタイプを使用した要求も受け入れることを確認する必要があります。これは、既に試行していて機能しなかったため、明らかにそうではありません。

12
Matteo Bernardini

これを答えとして投稿すると、あなたが知りたいことを正確に知ることができると私は信じています。

そのようなデータを送信するためにどのような方法が使用されているのか知りたいだけです。最初の画像はXHRを使用して取得されていることを保証できます

「正しい」バージョンがどのように生成されるかを確認するのに十分な情報を提供していませんが、必要な関連ビットをキャプチャして、次のようなコードをドロップすることができます前動作中XMLHttpRequestは.opened;

(function (obj, methods) {
    var i;
    function log() {
        console.log.apply(console, arguments);
    }
    for (i = 0; i < methods.length; ++i)
        obj[methods[i]] = (function (method_name, method) {
            return function () {
                log.call(null, method_name, arguments);
                return method.apply(this, arguments);
            }
        }(methods[i], obj[methods[i]]));
}(XMLHttpRequest.prototype, ['open', 'send', 'setRequestHeader']));

次に、アクションを実行して起動します。関連するパラメーターがログに記録されるため、セットアップおよび送信時に何が発生するかを正確に確認できます。これにより、何を渡すかを知ることができます。

問題は、私が禁止されていることです（403）

これはサーバーから返されたものであり、ブラウザーによって開始された中止ではないように見えるため、これは同じOriginセキュリティエラーではないと想定します。

0
Paul S.