使用从 Ionic 到 Laravel 的发布请求时的跨域请求答案

【问题标题】：Cross-Origin Request while using a post request from Ionic to Laravel使用从 Ionic 到 Laravel 的发布请求时的跨域请求
【发布时间】：2020-01-29 05:26:54
【问题描述】：

我正在尝试从我的前端 (Ionic) 向我的后端 Laravel 发送一个发布请求！它返回那个 Cors 错误。我已经在 Laravel 中创建了 Cors 类并将其添加到 routeMiddleware，我也尝试了 barryvdh 提出的解决方案，但它也无法正常工作。当我使用 get 方法尝试请求时，它可以工作，但使用 post 方法时情况不同。

这是我在 laravel Cors 类中的句柄方法：

public function handle($request, Closure $next)
   {
        header("Access-Control-Allow-Origin: *");

       // ALLOW OPTIONS METHOD
       $headers = [
           'Access-Control-Allow-Origin'=> '*',
           'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
           'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
       ];
       if($request->getMethod() == "OPTIONS") {
           // The client-side application can set only headers allowed in Access-Control-Allow-Headers
           return Response::make('OK', 200, $headers);
       }

       $response = $next($request);
       foreach($headers as $key => $value)
           $response->header($key, $value);
       return $response;
   }

Kernel.php 中的中间件数组

    protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\Cors::class,

    ];

Kernel.php 中 middlewareGroups 数组的 api 部分

       'api' => [
            'throttle:60,1',
            'bindings',
            \App\Http\Middleware\Cors::class,
        ]

Kernel.php 中的 routeMiddleware 数组

    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'jwt.auth' => Tymon\JWTAuth\Http\Middleware\Authenticate::class,
        'jwt.refresh' => Tymon\JWTAuth\Http\Middleware\RefreshToken::class,
        'cors' => \App\Http\Middleware\Cors::class,
    ];

我尝试调用的路线

  Route::post('auth/login', 'ApiController@login');

这是我在 ionic 中执行的代码

  login(emaill: string, passwordd: string) {
    return this.http.post<any>(      
      `${environment.laravelBackend}/auth/login`,
      { email: emaill, password: passwordd}
    );
  }

有谁知道我怎样才能完成这项工作？提前致谢

【问题讨论】：

我知道这不是你的答案，但看看github.com/barryvdh/laravel-cors，你就可以停止重新发明轮子了
@AH.Pooladvand 我已经尝试过该解决方案但它不起作用，我认为问题来自 Ionic

标签： laravel ionic-framework cors

【解决方案1】：

如果第一个或第二个不起作用，可能有 2 个解决方案都尝试。

1) 有时，由于制作 API 的开发人员的 composer 版本以及您设置环境的 composer 版本的机器不同，它有时会不起作用。检查。如果可能的话，发送你和开发api的机器的composer版本。

2) 像这样在 .htaccess 文件中添加 CORS

Header set  Access-Control-Allow-Origin "*"
Header set  Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS"
Header set Access-Control-Allow-Credentials "true"

【讨论】：