2016-08-23 1 views
3

J'écris un site Web avec AngularJS qui communique avec une API sur le serveur et fournit quelques informations. pour la partie de connexion Je dois envoyer une demande de poste http contenant Email, mot de passe et etc. Cela fonctionne bien sur google Chrome et IE. Je veux dire qu'il envoie la demande de poste et obtient un jeton. Mais dans FireFox comme j'ai vérifié dans le réseau, il envoie une demande d'OPTION et obtient 200 mais après cela il n'envoie aucun message! par conséquent, mon identifiant ne disparaîtra pas et je ne recevrai aucun jeton.AngularJS demande Publier ne fonctionne pas correctement sur Firefox

que devrais-je faire pour cette situation?

App.config:

$httpProvider.defaults.withCredentials = true; 
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8;'; 
    $httpProvider.interceptors.push('httpRequestInterceptor'); 

Fonction en service qui envoie la demande:

this.loginEmail = function(f_email, f_pass, deviceModel, deviceOs) { 
    var data = $.param({ 
      email: f_email, 
      password: f_pass, 
      device_model: deviceModel, 
      device_os: deviceOs 
     }); 

     return $http({ 
      method: "POST", 
      url: app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id, 
      data: data 
     }).success(function(response){ 
      return response.status; 
     }); 
    /*return $http.post(app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id, data).success(function(response){ 
     return response.status; 
    }).error(function(response){ 
     return response.status; 
    });*/ 
}; 

informations d'identification du serveur sont vraies

CORS semble bien parce que je peux faire obtenir demande

enter image description here

EDIT: Voici une autre chose qui peut être liée à ce problème: dans Chrome quand je suis connecté pour les requêtes GET envoie l'en-tête de jeton mais après il ne

httpRequestInterceptor:

app.factory('httpRequestInterceptor', function ($cookieStore) { 
    return { 
     request: function (config) { 

     config.headers['Authorization'] = $cookieStore.get('Auth-Key');; 
     config.headers['Accept'] = 'application/json;odata=verbose'; 
     return config; 
    } 
    }; 
}); 
+0

Peut être une extension de navigateur interférant avec la requête. Aussi, qu'est-ce que 'httpRequestInterceptor'? – Phil

+0

@Phil a ajouté httpRequestInterceptor à la modification – W1ldworm

Répondre

1

Le problème a été causé par des configurations apache.

avant:

Access-Control-Allow-Headers: "authorization" 

après:

Access-Control-Allow-Headers: "authorization, Content-type" 

MISE À JOUR:

Sur demande CORS si API nécessite des en-têtes spéciaux comme Auhtorization Token vous devez retourner toutes les options demande à 200 (ok!) sinon la solution ci-dessus ne fonctionnerait pas de toute façon. Voici le code:

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 
    header("HTTP/1.1 200 OK"); 
    exit(); 
} 

MISE À JOUR 2: Ce problème OPTIONS se produit dans le cadre REST pour Django! Pour OPTIONS, il évalue la requête en demandant une API entière s'il y a un problème, vous obtiendrez une erreur même si vous avez besoin d'autorisations pour envoyer une requête!

Exemple:

On suppose qu'il ya une URL comme api/profil qui a besoin d'un en-tête d'autorisation pour les détails profil Réagir aujourd'hui. Vous voulez envoyer la requête Cross Domain pour l'obtenir. Vous définissez les bons en-têtes et cliquez! Vous obtiendrez une erreur non autorisée! Pourquoi? Comme la requête pré-importée (OPTIONS) n'inclut aucun en-tête spécial et que le navigateur l'envoie au serveur, le serveur avec structure REST évalue la requête OPTIONS en vérifiant la requête entière (requête avec en-tête d'autorisation) mais OPTIONS n'a aucun en-tête d'autorisation donc cette demande n'est pas autorisée!

SOLUTION DE PERFECTIONNEMENT: Ce problème peut être résolu soit par côté client ou arrière-plan. développeur Front-End peut installer le plugin suivant sur le chrome:

allow-Control-Allow-Origin: *

développeur Back-End peut installer un package qui permet CORS le framework Django.