Javascript 与Laravel、AngularJS和CORS的路由问题
我一直在广泛地寻找解决这个问题的办法 我有一个带有Laravel 4后端实现的AngularJS web应用程序,如下所示:Javascript 与Laravel、AngularJS和CORS的路由问题,javascript,php,angularjs,laravel,cors,Javascript,Php,Angularjs,Laravel,Cors,我一直在广泛地寻找解决这个问题的办法 我有一个带有Laravel 4后端实现的AngularJS web应用程序,如下所示: http://app.mydomain.io/ = AngularJS web app http://api.mydomain.io/ = Laravel Back-end Route::post('/login', function() { $email = Input::get('email'); $password = Input::get('pa
http://app.mydomain.io/ = AngularJS web app
http://api.mydomain.io/ = Laravel Back-end
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!";
}
});
在Laravel中的routes.php文件中,我有以下php代码来设置访问控制头:
header('Access-Control-Allow-Origin: http://app.mydomain.io');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
我还有一个登录请求的路由设置,如下所示:
http://app.mydomain.io/ = AngularJS web app
http://api.mydomain.io/ = Laravel Back-end
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
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);
}
});
header('Access-Control-Allow-Origin: http://app.mydomain.io');
如果我将Laravel路线和AngularJS服务更改为使用GET,那么一切都会按预期进行。这个问题源于AngularJS.save()发出选项请求而不是POST(我不完全理解为什么)
有人能帮我找到合适的最佳实践解决方案吗
谢谢大家! 在客户端
.$http
您可以尝试设置默认的“设置HTTP头”以下解决方案有效: 在filters.php中添加以下内容:
XMLHttpRequest cannot load http://api.mydomain.io/login. Invalid HTTP status code 404
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);
}
});
header('Access-Control-Allow-Origin: http://app.mydomain.io');
并在routes.php的顶部添加以下内容:
XMLHttpRequest cannot load http://api.mydomain.io/login. Invalid HTTP status code 404
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);
}
});
header('Access-Control-Allow-Origin: http://app.mydomain.io');
感谢Google Plus社区!:)
Leon.我花了很长时间才弄明白这一点,这就是我想到的: 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(前端):
}]))
还请注意,Chrome和CORS请求中存在自签名SSL证书的错误,如果您对此感兴趣,我将提供一个链接
所以建议在调试时使用Firefox(或者Chrome上的DevHTTPClient对我来说很好)
干杯 在更新版本的Laravel(5+)中尝试此功能
可能是你的复制品,先生,我又省了一个小时的搜索时间!