Laravel、AngularJS 和 CORS 的路由问题答案

【问题标题】：Routing issue with Laravel, AngularJS and CORSLaravel、AngularJS 和 CORS 的路由问题
【发布时间】：2014-02-28 19:56:29
【问题描述】：

我一直在寻找解决这个问题的方法。

我有一个带有 Laravel 4 后端实现的 AngularJS Web 应用程序，如下所示：

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

在 Laravel 的 routes.php 文件中，我有以下 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（我不完全理解为什么）。

谁能帮我找到合适的最佳实践解决方案？

谢谢！

【问题讨论】：

AngularJS performs an OPTIONS HTTP request for a cross-origin resource的可能重复

标签： javascript php angularjs laravel cors

【解决方案1】：

在客户端 http://docs.angularjs.org/api/ng.$http

您可以尝试设置默认的“设置 HTTP 标头”

【讨论】：

【解决方案2】：

以下解决方案有效：

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

并在 routes.php 的顶部添加以下内容：

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

感谢 Google Plus 社区！ :)

莱昂。

【讨论】：

您先生，刚刚为我节省了一个小时的搜索时间！

【解决方案3】：

我花了很长时间才弄清楚这一点，这就是我想出的：

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（前端）：

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（或者 Chrome 上的 DevHTTPClient 对我来说效果很好）。

干杯！

【讨论】：

【解决方案4】：

试试这篇文章以获得更新版本的 Laravel (5+)

public function handle($request, Closure $next)
{
    $method = $request->method();
    if($method == "OPTIONS"){
       return response('It\'s supported. Relax!', 200); 
    }
    return $next($request);
}

【讨论】：