Laravel 5 和 Angular。将数据从前端发送到后端时出现 Cors 错误

Question

我在通过 Post 方法从表单发送数据时遇到问题（我使用的是 Angular 4）。我收到以下错误：

XMLHttpRequest cannot load http://ventas.dev/api/register. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

我在应用程序中添加了“Cors”，因此，使用 Postman 我可以创建新用户

我还查看了 Laravel 日志，但我有以下信息：

我已将我的代码上传到 Gist，以便任何想帮助我的人更轻松。

https://gist.github.com/rickymuvel/806a0ebf37b182ea509d229642914d9f

任何帮助，非常感谢。

Answer 1

我通过安装以下库解决了我的问题：

$ composer require barryvdh/laravel-cors

将 Cors\ServiceProvider 添加到您的 config/app.php 提供程序数组中：

Barryvdh\Cors\ServiceProvider::class,

在Kernel.php文件中添加（app/Http/Kernel.php）

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

这就是我所需要的。它有效。

Answer 2

我认为您缺少在后端启用 cors。

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
private static $allowedOriginsWhitelist = [
      'http://localhost:8000',
    ];

    // All the headers must be a string

    private static $allowedOrigin = '*';

    private static $allowedMethods = 'OPTIONS, GET, POST, PUT, PATCH, DELETE';

    private static $allowCredentials = 'true';

    private static $allowedHeaders = '*';

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
      if (! $this->isCorsRequest($request))
      {
        return $next($request);
      }

      static::$allowedOrigin = $this->resolveAllowedOrigin($request);

      static::$allowedHeaders = $this->resolveAllowedHeaders($request);

      $headers = [
        'Access-Control-Allow-Origin'       => static::$allowedOrigin,
        'Access-Control-Allow-Methods'      => static::$allowedMethods,
        'Access-Control-Allow-Headers'      => static::$allowedHeaders,
        'Access-Control-Allow-Credentials'  => static::$allowCredentials,
      ];

      // For preflighted requests
      if ($request->getMethod() === 'OPTIONS')
      {
        return response('', 200)->withHeaders($headers);
      }

      $response = $next($request)->withHeaders($headers);

      return $response;
    }

    /**
     * Incoming request is a CORS request if the Origin
     * header is set and Origin !== Host
     *
     * @param  \Illuminate\Http\Request  $request
     */
    private function isCorsRequest($request)
    {
      $requestHasOrigin = $request->headers->has('Origin');

      if ($requestHasOrigin)
      {
        $origin = $request->headers->get('Origin');

        $host = $request->getSchemeAndHttpHost();

        if ($origin !== $host)
        {
          return true;
        }
      }

      return false;
    }

    /**
     * Dynamic resolution of allowed origin since we can't
     * pass multiple domains to the header. The appropriate
     * domain is set in the Access-Control-Allow-Origin header
     * only if it is present in the whitelist.
     *
     * @param  \Illuminate\Http\Request  $request
     */
    private function resolveAllowedOrigin($request)
    {
      $allowedOrigin = static::$allowedOrigin;

      // If origin is in our $allowedOriginsWhitelist
      // then we send that in Access-Control-Allow-Origin

      $origin = $request->headers->get('Origin');

      if (in_array($origin, static::$allowedOriginsWhitelist))
      {
        $allowedOrigin = $origin;
      }

      return $allowedOrigin;
    }

    /**
     * Take the incoming client request headers
     * and return. Will be used to pass in Access-Control-Allow-Headers
     *
     * @param  \Illuminate\Http\Request  $request
     */
    private function resolveAllowedHeaders($request)
    {
      $allowedHeaders = $request->headers->get('Access-Control-Request-Headers');

      return $allowedHeaders;
    }

}