Question

我在不同的目录中有两个项目。第一个是我的Angular应用程序，第二个是Laravel 5.5后端。我已经创建了一个API，我想在我的Angular应用程序中调用它。当我尝试在Angular中获取API时，我得到了这个回复：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
resource at http://localhost/. (Reason: CORS header ‘Access-Control-Allow-
Origin’ missing).

这两个项目都在本地，我从http://localhost访问Laravel，从http://localhost:4200

访问Angular

我希望能够在本地获取和发布数据以测试我的应用程序。我该如何解决这个问题？

Answer 1

您需要为API请求提供一些CORS中间件，以允许您的客户端向您的API路由发出跨域请求。

您可以使用此套件：https://github.com/barryvdh/laravel-cors

或者自己实施它很容易。

Answer 2

如果要实现自己的CORS中间件，可以创建一个handle()函数的中间件，如下所示：

public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

然后在 /app/Http/Kernel.php 中将中间件添加到$routeMiddleware数组中。最后，您需要将此中间件添加到路由中。

我从这段视频中得到了这个解释：23.- Curso de Angular 4 con Laravel 5. Uso de Cors para conectar APIs.

Angular + Laravel 5.5 API

2 个答案: