Angular + Laravel 项目的 CORS 问题

Posted

技术标签:

【中文标题】Angular + Laravel 项目的 CORS 问题【英文标题】:CORS issue for Angular + Laravel project 【发布时间】:2017-05-09 10:57:41 【问题描述】:

我在使用 Angular 创建 Web 应用程序时遇到了麻烦,该应用程序正在访问由 Laravel 构建的 RESTful API。 虽然我创建了传递正确标头的中间件,但它不起作用。

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

谁能帮帮我?

【问题讨论】:

XMLHttpRequest 无法加载 link。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'localhost:3000' 不允许访问。使用 post 方法访问 api 服务器时出现此错误。 @ArviPalmu 您应该详细说明到目前为止您看到的问题。您最好显示一些以失败告终的 HTTP 请求标头,以便其他人对您看到的内容有很好的理解。 【参考方案1】:

嗯,我知道这是一个烦人的问题,但有两种解决方案。

1.

您为每个 API 调用路由定义 OPTIONS 方法,并使其通过您创建的中间件,如下所示:

Route::options('todos/any?', ['middleware' => 'cors', function()return;]);
Route::options('projects/any?', ['middleware' => 'cors', function()return;]);

2

您破解 Laravel 核心类文件,以便它为每个 OPTIONS 请求传递 CORS 标头。

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

将此函数更新为following,以便它将为OPTIONS请求传递CORS标头

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

希望这些解决方案会有所帮助。

【讨论】:

@RayC 这是一个很好的解决方案!!!我采用了解决方案#2,它的工作很迷人!!!我已经在谷歌上搜索解决这个问题,但失败了,没有运气,虽然我被困住了。非常感谢! #2:在任何情况下都不应该修改供应商文件

以上是关于Angular + Laravel 项目的 CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章

角/Laravel CORS

Angular + Laravel 项目的 CORS 问题

如何将 Laravel 5.4 与 Angular 4 集成

使用刀片将 Angular5 集成到现有的 Laravel 项目中

Laravel Lumen + Angular .. 是不是是同一个项目?

在 Laravel&Angular 项目中分离 AngularJS 控制器文件