web-dev-qa-db-ja.com

document.domainが正しく設定されている場合でも、サブドメイン間のajaxリクエストが拒否されました

私のアプリケーションでは、1つのサブドメイン（dev.u413.com）にWebサイトがあり、jQueryを使用して別のサブドメイン（api.u413.com）のJSONAPIにajaxリクエストを送信します。 Chrome開発ツールとFirefoxFirebugでリクエストを調べると、リクエストがAccess-Control-Allowed-Originによって妨げられているようです。document.domainを現在のドメインのサフィックスに設定しました：document.domain = 'u413.com';。

これが私のリクエストです：

    $.ajax({
        dataType: 'json',
        data: { parseAsHtml: true, cli: 'help' },
        url: 'http://api.u413.com/',
        success: function (response) {
            alert(response.Command);
        }
    });

同じドメインにあるようにajaxリクエストを変更すると、リクエストは成功します。

    $.ajax({
        dataType: 'json',
        crossDomain: false,
        data: { parseAsHtml: true, cli: 'help' },
        url: 'http://dev.u413.com/',
        success: function (response) {
            alert(response.Command);
        }
    });

なぜこれが起こるのですか？ 同一生成元ポリシー のガイドラインに従って、document.domainを両方のサブドメインの共通のサフィックスに設定したので、ブラウザはクロスドメインの問題について文句を言うべきではありません。

現在、アプリはjsonpで動作していますが、上記でリンクしたのと同じOriginポリシーに従って適切なajaxリクエストが動作するはずです。必要がなければ、jsonpは使いたくないです。サブドメイン間で定期的にajaxリクエストを行うことはできませんか？

javascriptjqueryjsoncross-domainjsonp
16
Chev

document.domainはAJAXでは機能しません。これは、クロスドメインのiframeおよびウィンドウ通信を対象としています。あなたの場合、同一生成元ポリシー（ 最後の行 テーブルの）に違反しているため、JSONPまたはサーバーサイドブリッジのいずれかを使用する必要があります。

これは非常に 素敵なガイド で、クロスドメインAJAXリクエストを達成するためのさまざまなテクニックを示しています。

20
Darin Dimitrov

同一生成元ポリシーは、私が対処しなければならなかった最も苛立たしいブラウザ関連トピックの1つです。同じドメイン上の2台のサーバーが通信できないことは私には愚かです。残念ながら、同一生成元ポリシーは、同じサーバーへの2つの要求でさえ、異なるポートで同一生成元ポリシーの違反と見なします。これは将来のブラウザで良くなると思います：

http://www.html5rocks.com/en/tutorials/file/xhr2/

検索：クロスオリジンリソースシェアリング（CORS）

基本的に、サーバーは「サーバーxyzへのクロスドメインまたはクロスサブドメイン呼び出しを許可しても問題ありません」という応答ヘッダーを設定する必要があります。

すべてのブラウザがこれをサポートするまでにはしばらく時間がかかります（そして、ほとんどのユーザーがとにかくオフになるまで、私はie8をサポートする必要があります）-しかし、少なくともトンネルの終わりには光があります。

5
George

他のサブドメインにもdocument.domain = 'u413.comを追加する必要があります。

1
stevebot

サブドメイン間で定期的にajaxリクエストを行うことはできませんか？

これは技術的にはAJAXではありませんが、フォーム送信が正常にクロスドメインになるAJAXリクエストを模倣できます。欠点は、応答にアクセスできないため、ページが次のようになることです。フォームのACTIONURLにリダイレクトされます。

これの代わりに：

jQuery.post('https://www.com',
    'offerCode':523153,
    'accountNumber':'',
    '_item.x':'42',
    '_item.y':'21'
});

これを使って：

jQuery('<form action="https://www.com" method="POST">
      <input type="text" name="offerCode" value="523153">
      <input type="text" name="accountNumber" value="">
      <input type="text" name="_item.x" value="42">
      <input type="text" name="_item.y" value="21">
    </form>').trigger('submit');
0
Alex W