CORS问题为Angular + Laravel项目 [英] CORS issue for Angular + Laravel project
问题描述
我无法使用Angular创建Web应用程序,它访问了由Laravel构建的RESTful API。
虽然我已经创建了传递正确标头的中间件,但它不工作。
I am having trouble to create web app using Angular which is accessing to RESTful API built by Laravel. Although I have created middleware which passes correct headers, it does not work.
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Credentials', 'true')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization');
}
}
任何人都可以帮助我?
推荐答案
这是一个恼人的问题,我知道,但有2个解决方案。
Well, this is a kind of annoying issue, I know, but there are 2 solutions.
您为每个API调用路由定义OPTIONS方法,并使其通过您创建的中间件,如下所示:
You define OPTIONS method for every API calling route, and make it pass the middleware you created like following:
Route::options('todos/{any?}', ['middleware' => 'cors', function(){return;}]);
Route::options('projects/{any?}', ['middleware' => 'cors', function(){return;}]);
2
文件,以便它通过每个OPTIONS请求的CORS标头。
2
You hack Laravel core class file, so that it passes CORS header for every OPTIONS request.
/vendor/laravel/framework/src/framework/Illuminate/Routing/RouteCollection.php
你会发现以下函数
protected function getRouteForMethods($request, array $methods)
{
if ($request->method() == 'OPTIONS') {
return (new Route('OPTIONS', $request->path(), function () use ($methods) {
return new Response('', 200, ['Allow' => implode(',', $methods)]);
}))->bind($request);
}
$this->methodNotAllowed($methods);
}
将此函数更新为以下内容,以便它传递OPTIONS请求的CORS头
Update this function to following, so that it will pass CORS headers for OPTIONS request
protected function getRouteForMethods($request, array $methods)
{
if ($request->method() == 'OPTIONS') {
return (new Route('OPTIONS', $request->path(), function () use ($methods) {
return new Response('', 200, [
'Allow' => implode(',', $methods),
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Credentials' => 'true',
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization',
]);
}))->bind($request);
}
$this->methodNotAllowed($methods);
}
对我来说,选择是你的。
但是解决方案#2是对Laravel核心的攻击,如果你升级Laravel本身可能会有一些问题?但至少它有更少的编码。 :D
So for me, both solutions work okay. Choice is yours. But solution #2 is something hack on Laravel core, you might have some issues if you upgrade Laravel itself? But at least it has less coding. :D
希望这些解决方案会有所帮助。
Hope these solutions will be helpful.
这篇关于CORS问题为Angular + Laravel项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!