请求的资源上没有“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, 
];

您不需要在您的 ionic 客户端中传递 access-control 标头，这些标头是您的服务器在预检期间生成的，以便让客户端知道服务器允许什么。 在你的离子中设置标题，

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

JWT-Auth 还附带一个内置中间件来检查请求是否来自经过身份验证的实体，只需在受保护的路由上使用它

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