La richiesta OPZIONI di verifica preliminare di AngularJS non funziona con Chrome?

Question

Ho sviluppato un'applicazione semplice utilizzando AngularJS ospitato here. Sto consumando una API che ho sviluppato io stesso in Laravel ospitato here. Quando provo ad accedere all'applicazione usando Firefox, funziona bene. La mia API accetta la richiesta OPZIONI pre-volo e risponde con un 200 OK. Infine, la richiesta POST genera un token e l'utente è connesso

D'altra parte, quando Chrome invia la richiesta di opzioni pre-volo, riceve un 403 indietro e mi dà questo errore nella console:.

XMLHttpRequest cannot load http://angulairapi.rohanchhabra.in/auth. Invalid HTTP status code 403 

Ho provato a inviare anche la richiesta OPZIONI su/auth tramite il client Postman REST e restituisce 200 OK come previsto. Perché Chrome si comporta in questo modo? Cosa mi manca?

Answer 1

Il controllo di accesso è una responsabilità del server, è necessario config il suo a Laravel.

Utilizzare questo pacchetto: Laravel Cors questo aiuta molto.

Answer 2

Problema in "Access-Control-Request-Headers: accept". È necessario aggiungere "accetta" a "Access-Control-Allow-Headers".

confrontare questo a due richiesta:

1. Chrome: 403 Forbidden ricciolo 'http://angulairapi.rohanchhabra.in/auth' -X OPZIONI -H 'Access-Control-Request-Metodo: POST' /angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU, ru; q = 0.8, en-US; q = 0.6, en; q = 0.4' -H 'User-Agent: Mozilla /5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, come Gecko) Chrome/39.0.2171.95 Safari/537.36 '-H' Accetta: / '-H' Riferimento: http://angulair.rohanchhabra.in/ '-H' Connessione: keep-alive '-H' Access-Control-Request-Headers: accetta, content-type '-v

2. Firefox: 200 OK ricciolo 'http://angulairapi.rohanchhabra.in/auth' -X OPZIONI -H 'Access-Control-Request-Metodo: POST' -H 'Origine: http://angulair.rohanchhabra.in' -H 'Accept-Encoding: gzip, deflate, SDCH' -H 'Accept-Language: ru-RU, ru; q = 0.8, en-US; q = 0.6, en; q = 0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, come Gecko) Chrome/39.0.2171.95 Safari/537.36' -H 'Accept: /' -H 'Referer: http://angulair.rohanchhabra.in/' -H 'Connection: keep-alive' -H 'Access-Control-Request-Header: Content-Type' -v

Answer 3

in laravel, cercare di impostare: 'Access-Control-Allow-Methods' & 'Access-Control-Allow-Headers' a '*'

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)

aggiungere sotto

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); 
    } 
}); 

è possibile modificare i valori di Access-Control-* internet a vostra esigenza

Answer 5

In prima devi inviare tali intestazioni (jolly funziona errato a volte):

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

Nella seconda (e importante) rimuovere intestazione dal servizio AngularJs $ httpProvider in config: