web-dev-qa-db-ja.com

クロスオリジンの「承認」-jquery.ajax（）を使用したヘッダー

クロスオリジンドメインを送信し、カスタムの「承認」ヘッダーを追加しようとしています。以下のコードをご覧ください。

エラー：

XMLHttpRequestは{url}をロードできません。要求ヘッダーフィールドの承認は、Access-Control-Allow-Headersでは許可されていません。

function loadJson(from, to) {
    $.ajax({
        //this is a 'cross-Origin' domain
        url : "http://localhost:2180/api/index.php",
        dataType : 'json',
        data : { handler : "statistic", from : from, to : to
        },
        beforeSend : setHeader,
        success : function(data) {
            alert("success");
        },
        error : function(jqXHR, textStatus, errorThrown) {
            alert("error");
        }
    });
}

function getToken() {
    var cookie = Cookie.getCookie(cookieName);
    var auth = jQuery.parseJSON(cookie);
    var token = "Token " + auth.id + ":" + auth.key;
}

function setHeader(xhr) {
    xhr.setRequestHeader('Authorization', getToken());
}

私も試しました：

headers : { 'Authorization' : getToken() },

ajaxリクエストで。

Jquery-ajaxフレームワークがクロスオリジン認証をブロックしている可能性はありますか？どうすれば修正できますか？

更新：

ちなみに、クライアント側でCookieにauth.keyを保存するより安全な方法はありますか？ getToken（）は、本体や日付などをハッシュするより複雑なメソッドに置き換えられます.

javascriptjqueryajaxcross-domain
40
Johannes Staehlin

これは、CORSリクエストの作成例です。サーバーにアクセスできる場合（これはlocalhostへの要求であるため、これを行うと想定しています）、CORS固有の応答ヘッダーを追加する必要があります。最も簡単なことは、次の応答ヘッダーを追加することです。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization

サーバーは、HTTP OPTIONS要求に応答するように構成する必要もあります。 CORSリクエストの作成について詳しくは、こちらをご覧ください。 http://www.html5rocks.com/en/tutorials/cors/

64
monsur