Preflight OPTIONS-Anfrage von AngularJS funktioniert nicht mit Chrome?

Question

Ich habe eine einfache Anwendung mit AngularJS gehostet here entwickelt. Ich verzehre eine API, die ich selbst in Laravel gehostet here entwickelt habe. Wenn ich versuche, mich mit Firefox in die Anwendung einzuloggen, funktioniert es einwandfrei. Meine API akzeptiert die Pre-Flight-OPTIONS-Anfrage und antwortet mit 200 OK. Schließlich erzeugt die POST-Anforderung ein Token und der Benutzer angemeldet ist

Auf der anderen Seite, wenn Chrome die Preflight-OPTIONS-Anforderung sendet, erhält er eine 403 zurück und es gibt mir diesen Fehler in der Konsole:.

Ich habe versucht, die OPTIONS-Anfrage am/auth über Postman REST-Client auch zu senden, und es gibt wieder 200 OK wie erwartet. Warum verhält sich Chrome so? Was vermisse ich?

Answer 1

Die Zugriffskontrolle ist eine Serververantwortung, Sie brauchen Konfiguration t sein in Laravel. Verwenden Sie dieses Paket: Laravel Cors Dies hilft sehr.

Answer 2

Problem in "Access-Control-Request-Header: akzeptieren". Sie müssen "accept" zu Ihren "Access-Control-Allow-Headers" hinzufügen.

Vergleichen Sie diese beiden Anfrage:

1. Chrome: 403 Forbidden curl 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Methode: POST' /angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Sprache: ru-RU, ru; q = 0.8, de-DE; q = 0.6, de; q = 0.4' -H 'Benutzer-Agent: Mozilla /5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/39.0.2171.95 Safari/537.36 '-H' Akzeptieren: / '-H' Referer: http://angulair.rohanchhabra.in/ '-H' Verbindung: keep-alive '-H' Zugriffssteuerungsanfrage-Header: accept, content-type '-v

2. Firefox: 200 OK curl 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'Access-Control-Request-Methode: POST' -H 'Herkunft: http://angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Sprache: ru-RU, ru; q = 0.8, de-DE; q = 0.6, de; q = 0.4' -H 'Benutzer-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/39.0.2171.95 Safari/537.Akzeptieren 36' -H ': /' -H 'Referer: http://angulair.rohanchhabra.in/' -H 'Verbindung: Keep-Alive' -H 'Access-Control-Request-Header: Content-type' -v

Answer 3

in Laravel, versuchen zu setzen: 'Access-Control-Allow-Methods' & 'Access-Control-Allow-Headers' zu '*'

public function handle($request, Closure $next) 
{ 

    header("Access-Control-Allow-Origin: *"); 

    // ALLOW OPTIONS METHOD 
    $headers = [ 
     'Access-Control-Allow-Methods'=> '*', 
     'Access-Control-Allow-Headers'=> '*' 
    ]; 
    if($request->getMethod() == "OPTIONS") { 
     // The client-side application can set only headers allowed in Access-Control-Allow-Headers 
     return Response::make('OK', 200, $headers); 
    } 

    $response = $next($request); 
    foreach($headers as $key => $value) 
     $response->header($key, $value); 
    return $response; 
} 

Answer 4

in filters.php (Laravel 4.2)

unter

hinzufügen

App::before(function($request) 
{ 
    // Enable CORS 
    // In production, replace * with http://yourdomain.com 
    header("Access-Control-Allow-Origin: *"); 
    //header('Access-Control-Allow-Credentials: true'); optional 

    if (Request::getMethod() == "OPTIONS") { 
     // The client-side application can set only headers allowed in Access-Control-Allow-Headers 
     $headers = [ 
      'Access-Control-Allow-Methods'=> '*', 
      'Access-Control-Allow-Headers'=> '*' 
     ]; 
     return Response::make('You are connected to the API', 200, $headers); 
    } 
}); 

können Sie die Werte von Access-Control-* ändern Ihre Notwendigkeit Hotel

Answer 5

In zuerst müssen Sie diese Header senden (Wildcard funktioniert falsch manchmal):

Access-Control-Allow-Headers: X-Requested-With, content-type 
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS 

In der zweiten (und wichtig) entfernen Kopf von AngularJs-Service $ httpProvider in der Konfig: