Запрос предполетных настроек от AngularJS не работает с Chrome?

Question

Я разработал простое приложение, использующее AngularJS here. Я использую API, который я разработал в Laravel, размещенном here. Когда я пытаюсь войти в приложение с помощью Firefox, он отлично работает. Мой API принимает запрос перед полетом OPTIONS и отвечает на 200 OK. Наконец запрос POST генерирует маркер, и пользователь вошел в систему

С другой стороны, когда Chrome посылает запрос предполетной OPTIONS, он получает 403 обратно, и это дает мне эту ошибку в консоли.

Я также попробовал отправить запрос OPTIONS на/auth через клиент Postman REST, и он возвращает 200 OK, как ожидалось. Почему Chrome ведет себя так? Что мне не хватает?

Answer 1

Контроль доступа является ответственностью сервера, вам необходимо настроить t его в Ларавеле.

Используйте этот пакет: Laravel Cors Это очень помогает.

Answer 2

Проблема в «Access-Control-Request-Headers: accept». Вам нужно добавить «принять» к вашим «Доступным для контроля-заголовкам».

Сравните это два запроса:

1. Chrome: 403 Forbidden локон 'http://angulairapi.rohanchhabra.in/auth' -x Опции -H 'Access-Control-Request-метод: 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, например, Gecko) Chrome/39.0.2171.95 Safari/537.36 '-H' Accept: / '-H' Referer: http://angulair.rohanchhabra.in/ '-H' Соединение: keep-alive '-H' Access-Control-Request-Headers: accept, content-type '-v

2. Firefox: 200 OK локон 'http://angulairapi.rohanchhabra.in/auth' -x Опции -H 'Access-Control-Request-метод: POST' -H 'Происхождение: http://angulair.rohanchhabra.in' -H 'Accept-Encoding: GZIP, выкачать, 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, например, 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-Headers: Content-Type' -v

Answer 3

в Laravel, попробуйте установить: 'Access-Control-Allow-Methods' & 'Access-Control-Allow-Headers' к '*'

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

в filters.php (Laravel 4.2)

добавить ниже

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

вы можете изменить значения Access-Control-* номера вашей потребности

Answer 5

В первом вы должны отправить эти заголовки (подстановочные работает неправильно иногда):

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

Во второй (и важный) удалить заголовок от службы AngularJs $ httpProvider в config: