На запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - Ionic 3 и Laravel

Question

Я пытаюсь подключить свое приложение к бэкэнд-серверу в Laravel

У меня есть перехватчик, который добавляет заголовки в запрос:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('----------------- SESSION -----------------');
console.log(this.session.token);

this.token = this.session.token;
const headers = this.buildRequestHeaders();
const authRequest = req.clone({
  setHeaders: {
    'Access-Control-Allow-Credentials': 'false',
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type",
    "Access-Control-Allow-Methods": "OPTIONS,POST,GET",
    'Authorization': `Bearer ${this.token}`
  }
});

return next.handle(authRequest);

}

На сервере у меня есть промежуточное ПО:

<?php

namespace App\Http\Middleware;

use App\Helpers\JsonResponseHelper;
use Closure;
use JWTAuth;
use Tymon\JWTAuth\Exceptions\JWTException;
use Tymon\JWTAuth\Exceptions\TokenExpiredException;
use Tymon\JWTAuth\Middleware\GetUserFromToken;

class JwtCheck extends GetUserFromToken
{
    public function handle($request, Closure $next)
    {
        header('Content-Type', 'application/json');
        header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Request-Headers', 'Origin, Authorization, Content-Type, Accept');
        header('Access-Control-Allow-Origin', '*');
    if (strpos($request->headers->get("Authorization"), "Bearer ") === false) {
        $request->headers->set("Authorization", "Bearer " . $request->headers->get("Authorization"));
    }

    if (!$token = $this->auth->setRequest($request)->getToken()) {
        $data['errors'] = trans('auth.failed');
        $message = trans('auth.failed');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    }
    try {
        //$user = $this->auth->authenticate($token);
        $user = JWTAuth::parseToken()->authenticate($token);
    } catch (TokenExpiredException $e) {
        $data['errors'] = trans('messages.token-expired');
        $message = trans('messages.token-expired');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    } catch (JWTException $e) {
        $data['errors'] = $e->getMessage();
        $message = trans('messages.error');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    } catch (TokenInvalidException $e) {
        $data['errors'] = $e->getMessage();
        $message = trans('messages.error');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    } catch (Exception $e) {
        $data['errors'] = $e->getMessage();
        $message = trans('messages.error');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    }
    if (!$user) {
        $data['errors'] = trans('auth.failed');
        $message = trans('auth.failed');
        return JsonResponseHelper::dataResponse(trans('messages.error'), $data, true, 401, $message);
    }
    $request->merge(array("user" => $user));
    $request->merge(array("token" => $token));

    return $next($request);

Вот моя проблема: https://i.stack.imgur.com/CG9Tq.png

Это запрос, отправленный на сервер.Очевидно, что мой Access-Control-Allow-Originis добавляет внутри заголовка запроса: https://i.stack.imgur.com/WXN0L.png

Answer 1

Если вы видите состояния ошибки Response to Pre-flight request doesn't pass the control check, при этой проверке управления сервер сообщает браузеру или клиенту, что ему разрешено делать запрос к нему. Этот запрос выполняется до вашего оригинала первоначального запроса. Вы устанавливаете заголовки в контроллере, запрос отклоняется до того, как он достигает контроллера,

Создайте промежуточное ПО с именем Cors и в методе его дескриптора:

 public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'content-type, authorization, x-requested-with');
    }

и Kernel.php передают только что созданное промежуточное ПО.

 protected $middleware = [ 
    \App\Http\Middleware\Cors::class, 
];

вам не нужно передавать access-control заголовки в вашем ионном клиенте, они генерируются вашим сервером во время предварительной проверки, чтобы дать клиенту знать, что разрешено сервером. Установите заголовки в вашем ионном виде,

setHeaders: {
   Accept: `application/json`,
  'Content-Type': `application/json`,
   Authorization: `Bearer ${this.token}`
   }

Кроме того, JWT-Auth поставляется со встроенным промежуточным программным обеспечением для проверки того, является ли запрос аутентифицированным объектом, просто используйте его на защищенных маршрутах

jwt.auth = \Tymon\JWTAuth\Middlware\GetUserFromToken::class