Angular 拉威尔5号和棱角形。从前端向后端发送数据时出现Cors错误

Angular 拉威尔5号和棱角形。从前端向后端发送数据时出现Cors错误,angular,laravel-5,xmlhttprequest,cors,Angular,Laravel 5,Xmlhttprequest,Cors,通过Post方法从表单发送数据时遇到问题(我使用的是Angular4)。我得到以下错误: 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. Ori

通过Post方法从表单发送数据时遇到问题(我使用的是Angular4)。我得到以下错误:

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,这样任何想帮助我的人都可以让它变得更简单


任何帮助,非常感谢。

我认为您缺少在后端启用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;
    }

}

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

$ composer require barryvdh/laravel-cors

将Cors\ServiceProvider添加到config/app.php providers数组:

Barryvdh\Cors\ServiceProvider::class,
外接程序Kernel.php文件(app/Http/Kernel.php)


这就是我所需要的。它可以工作。

您可以尝试将内容类型添加到您的标题中吗?{'Content-Type','application/x-www-form-urlencoded'}我刚做了,但是出现了相同的错误。你确定启用了cors吗?当然。您可以在中查看我的代码:我应该修改或创建什么文件?@Ricky这将帮助您构建自己的自定义中间件。
protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];