2014-02-04 5 views
4

Я искал решение в широком и широком диапазоне для решения этой проблемы.Проблема маршрутизации с Laravel, AngularJS и CORS

У меня есть веб-приложение AngularJS с реализацией серверной в Laravel 4 следующим образом:

http://app.mydomain.io/ = AngularJS web app 
http://api.mydomain.io/ = Laravel Back-end 

в пределах routes.php файла в Laravel У меня есть следующий PHP-код, чтобы установить заголовки Access-Control:

header('Access-Control-Allow-Origin: http://app.mydomain.io'); 
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE'); 

у меня также есть маршрут установка для запроса авторизации следующим образом:

Route::post('/login', function() 
{ 
    $email = Input::get('email'); 
    $password = Input::get('password'); 
    if (Auth::attempt(array('email' => $email, 'password' => $password))) 
    { 
     return "Success!"; 
    } else { 
     return "Fail!"; 
    } 
}); 

В AngularJS У меня есть AuthService, который выглядит, как показано ниже:

app.factory('AuthService', ['$resource', '$q', '$cookieStore', function($resource, $q, $cookieStore) { 
    var user = null; 
    var Service = $resource('//api.mydomain.io/login/', {}, {}); 
    return { 
     login: function(email, password) { 
      var deferred = $q.defer(); 
      Service.save({email: email, password: password}, function(response) { 
       $cookieStore.put('user', JSON.stringify(response)); 
       deferred.resolve(true); 
      }, function(error) { 
       deferred.reject(error); 
      }); 
      return deferred.promise; 
     } 
    }; 
}]); 

Когда этот запрос был сделан, я получаю следующее:

XMLHttpRequest cannot load http://api.mydomain.io/login. Invalid HTTP status code 404 

Если изменить маршрут Laravel и AngularJS обслуживание использовать GET, все работает как и ожидалось. Проблема связана с AngularJS .save(), создающим запрос OPTIONS вместо POST (я не совсем понимаю почему).

Может ли кто-нибудь помочь мне с правильным и лучшим решением?

Спасибо!

+0

возможно дубликат [AngularJS выполняет запрос OPTIONS HTTP для кросс-происхождения ресурса] (http://stackoverflow.com/questions/ 12111936/angularjs-perform-a-options-http-request-for-a-cross-origin-resource) – Barbarrosa

+0

Вам нужно добавить заголовки в index.php, а также создать промежуточное ПО для этого. Я столкнулся с тем же вопросом и решил его, воспользовавшись помощью http://tekina.info/cors-problem-laravel-angular –

ответ

7

следующее решение работали:.

В filters.php добавить следующее:

App::before(function($request) 
{ 
    if (Request::getMethod() == "OPTIONS") { 
     $headers = array(
      'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE', 
      'Access-Control-Allow-Headers'=> 'X-Requested-With, content-type',); 
     return Response::make('', 200, $headers); 
    } 
}); 

И наверху маршрутов.php добавить следующее:

header('Access-Control-Allow-Origin: http://app.mydomain.io'); 

Благодаря сообществу Google Plus! :)

Leon.

+0

Вы, сэр, только что спасли мне еще один час поиска! –

0

Я использовал некоторое время выяснить это, и это то, что я придумал:

Filters.php:

App::before(function($request) 
{ 

    header('Access-Control-Allow-Origin: http://app.mydomain.io'); 
    header('Access-Control-Allow-Credentials: true'); 
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'); 
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization'); 

    // Pre-flight request handling, this is used for AJAX 
    if($request->getRealMethod() == 'OPTIONS') 
    { 
     Log::debug('Pre flight request from Origin'.$rq_origin.' received.'); 
     // This is basically just for debug purposes 
     return Response::json(array('Method' => $request->getRealMethod()), 200); 
    } 
}); 

App.js (Frontend):

app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.useXDomain = true; 
    $httpProvider.defaults.withCredentials = true; 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 

}]);

Также обратите внимание, что в запросах Chrome и CORS имеется ошибка с самоподписанными сертификатами SSL, я предоставит ссылку, если вы заинтересованы в этом.

Поэтому рекомендуется использовать Firefox при отладке (или DevHTTPClient на Chrome работает отлично для меня).

Cheers!

0

Попробуйте эту часть для новых версий Laravel (5+)

public function handle($request, Closure $next) 
{ 
    $method = $request->method(); 
    if($method == "OPTIONS"){ 
     return response('It\'s supported. Relax!', 200); 
    } 
    return $next($request); 
} 
Смежные вопросы