Angular js benutzerdefinierten Header nicht senden, während Preflight-Anfrage

Question

gemacht

Ich habe folgenden Code

angular.module('myApp.Utils',[]) 
.factory('AuthInterceptor', function($q, $location) { 
    return { 
     request: function(config) { 
      config.headers = config.headers || {}; 
      if (window.localStorage.token) { 
       config.headers.Authorization = 'Bearer ' + window.localStorage.token; 
      } 
      config.headers["Content-Type"] = 'application/x-www-form-urlencoded'; 
      return config || $q.when(config); 
     }, 
     response: function(response) { 
      if (response.status === 401) { 
       //redirect user to login page 
       $location.url('/login'); 
      } 
      return response || $q.when(response); 
     } 
    }; 
}) 
.config(function($httpProvider) { 
    $httpProvider.interceptors.push('AuthInterceptor'); 
}); 

Wenn wir Wert für token Schlüssel in localStorage haben, fügt er Authorization Header jeder gemacht Ajax-Aufrufe.

Problem Es funktioniert gut, wenn es keine token (Nein-Header gesendet). Aber als Token in localstorage existieren und ich mache einen Anruf API, bekomme ich folgende Fehler

Response for preflight has invalid HTTP status code 404

Nach Forschung fand ich, dass der Browser Preflight-Anfrage (OPTIONS Anfrage) macht, bevor eine echte Anfrage zu machen. Ich habe auch festgestellt, dass wir benutzerdefinierte Header in Preflight-Anfrage nicht senden können. So gibt es sowieso, um dies zu beheben, benutzerdefinierte Header nur zu senden, wenn Sie eine echte Anfrage machen.

Ich habe versucht, das Hinzufügen folgende in .htaccess des Servers, der API dient ruft

<IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    Header add Access-Control-Allow-Headers "Content-Type, Authorization, Origin, X-Requested-With" 
    Header always set Access-Control-Allow-Methods "GET,POST,HEAD,DELETE,PUT,OPTIONS" 
</IfModule> 

Answer 1

ich mich Antwort gefunden zu haben.

Es hängt nicht mit eckigen oder. Htaccess Sache. Es ist mehr mit der Serverseite verwandt.

Wenn CORS Anfrage gemacht wird, macht der Browser einen Test (Preflight) Anfrage, um zu sehen, ob alles in Ordnung ist, dann nur es tatsächliche Anfrage.

Der folgende Code im API-Aufruf löste das Problem.

<?php 

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 
    header('Access-Control-Allow-Origin: *'); 
    header('Access-Control-Allow-Headers: X-Requested-With, Authorization'); 
    exit; 
}