web-dev-qa-db-fra.com

en-tête «Autorisation» croisé avec jquery.ajax ()

J'essaie d'envoyer un domaine cross-origin et d'ajouter un en-tête "Autorisation" personnalisé. Veuillez consulter le code ci-dessous.

Erreur:

XMLHttpRequest ne peut pas charger {url}. Champ d'en-tête de demande L'autorisation n'est pas autorisée par 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());
}

J'ai aussi essayé:

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

dans la demande ajax.

Se pourrait-il que le cadre jquery-ajax bloque l'authentification croisée d'origine? Comment puis-je réparer cela?

Mise à jour:

Soit dit en passant: existe-t-il une méthode plus sûre pour stocker la clé d'authentification côté client, puis dans un cookie? getToken () sera remplacé par une méthode plus complexe, hachant le corps, la date, etc.

javascriptjqueryajaxcross-domain
40
Johannes Staehlin

Il s'agit d'un exemple de demande CORS. Si vous avez accès au serveur (ce que je suppose que vous faites car il s'agit d'une demande à localhost), vous devrez ajouter des en-têtes de réponse spécifiques à CORS. La chose la plus simple à faire est d'ajouter les en-têtes de réponse suivants:

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

Votre serveur doit également être configuré pour répondre aux requêtes HTTP OPTIONS. Vous pouvez en savoir plus sur les demandes de CORS ici: http://www.html5rocks.com/en/tutorials/cors/

64
monsur