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

时间:2017-06-28 05:09:12

标签: angular laravel-5 xmlhttprequest cors

我在使用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我可以创建新用户 enter image description here

我还查看了Laravel日志,但我有这些信息:enter image description here

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

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

任何帮助,非常感谢。

2 个答案:

答案 0 :(得分:0)

我认为你缺少在你的后端启用角色。

<?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;
    }

}

答案 1 :(得分:0)

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

$ 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,
];

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