отреагировать / axios Auth и CORS проблема

Question

Использование:

Назад: Laravel / Passport Фронт: ReactJs / Axios

Я хочу получить данные на своей странице, и еслиЯ выполняю:

axios.get('http://localhost:8000/api/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log('error ' + error);
  });

GET http://localhost:8000/api/posts net :: ERR_ABORTED 401 (не авторизовано)

Доступ к XMLHttpRequest по адресу http://localhost:8000/api/posts' от источника 'http://localhost:3000' был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

И если я добавлю:

 headers: {
  Authorization: 'Bearer ' + token,
  crossDomain: true,
  'Access-Control-Allow-Origin': '*'
}

Доступ к XMLHttpRequest в 'http://localhost:8000/api/posts' от источника' http://localhost:3000' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит контроль доступаcheck: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

В laravel / api.php:

Route::middleware('auth:api')->group(function () {
    Route::get('posts', 'PostController@index');
});

AuthServiceProvider.php

    $this->registerPolicies();
    Route::group([ 'middleware' => [ \App\Http\Middleware\CORS::class ]], function() {
        Passport::routes();
    });

RouteServiceProvider.php

$this->mapApiRoutes();

$this->mapWebRoutes();

Route::group([
    'middleware' => ['auth:api', 'cors'],
    'namespace' => $this->namespace,
    'prefix' => 'auth:api',
], function ($router) {
    Route::apiResource('posts','PostController');
});

Но если я удаляю headers из axios, а такжепереместить route за пределы паспорта, яне работает нормально, я имею в виду, что это за пределами группы:

Route::get('posts', array('middleware' => 'cors', 'uses' => 'PostController@index'));

Итак, как я могу получить данные из Laravel API с аутентификацией паспорта с axios в Reactionjs?

ОБНОВЛЕНИЕ:

Route::group(['prefix' => 'auth:api', 'middleware' => 'cors'], function(){

    Route::get('posts', 'PostController@index');
});

404 (не найдено)

Я также использовал cors в группе, но все тот же и ошибка 404.

Answer 1

Чтобы разрешить CORS, мы должны разрешить запрос как на стороне сервера, так и на стороне клиента. Может быть, это поможет добавить раздел заголовка запроса в axios

headers: {"Access-Control-Allow-Origin": "*"}

и для маршрутовдобавьте

Route::options(
    '/{any:.*}', 
    [
        'middleware' => ['CorsMiddleware'], 
        function (){ 
            return response(['status' => 'success']); 
        }
    ]
);

и CorsMiddleware.php будет похож на

<?php 

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Response;

class CorsMiddleware
{
    protected $settings = array(
        'origin' => '*',    // Wide Open!
        'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
    );

    protected function setOrigin($req, $rsp) {
        $origin = $this->settings['origin'];
        if (is_callable($origin)) {
            // Call origin callback with request origin
            $origin = call_user_func($origin,
                        $req->header("Origin")
                    );
        }
        $rsp->header('Access-Control-Allow-Origin', $origin);
    }

    protected function setExposeHeaders($req, $rsp) {
        if (isset($this->settings['exposeHeaders'])) {
            $exposeHeaders = $this->settings['exposeHeaders'];
            if (is_array($exposeHeaders)) {
                $exposeHeaders = implode(", ", $exposeHeaders);
            }

            $rsp->header('Access-Control-Expose-Headers', $exposeHeaders);
        }
    }

protected function setMaxAge($req, $rsp) {
    if (isset($this->settings['maxAge'])) {
        $rsp->header('Access-Control-Max-Age', $this->settings['maxAge']);
    }
}

protected function setAllowCredentials($req, $rsp) {
    if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) {
        $rsp->header('Access-Control-Allow-Credentials', 'true');
    }
}

protected function setAllowMethods($req, $rsp) {
    if (isset($this->settings['allowMethods'])) {
        $allowMethods = $this->settings['allowMethods'];
        if (is_array($allowMethods)) {
            $allowMethods = implode(", ", $allowMethods);
        }

        $rsp->header('Access-Control-Allow-Methods', $allowMethods);
    }
}

protected function setAllowHeaders($req, $rsp) {
    if (isset($this->settings['allowHeaders'])) {
        $allowHeaders = $this->settings['allowHeaders'];
        if (is_array($allowHeaders)) {
            $allowHeaders = implode(", ", $allowHeaders);
        }
    }
    else {  // Otherwise, use request headers
        $allowHeaders = $req->header("Access-Control-Request-Headers");
    }
    if (isset($allowHeaders)) {
        $rsp->header('Access-Control-Allow-Headers', $allowHeaders);
    }
}

protected function setCorsHeaders($req, $rsp) {
    // http://www.html5rocks.com/static/images/cors_server_flowchart.png
    // Pre-flight
    if ($req->isMethod('OPTIONS')) {
        $this->setOrigin($req, $rsp);
        $this->setMaxAge($req, $rsp);
        $this->setAllowCredentials($req, $rsp);
        $this->setAllowMethods($req, $rsp);
        $this->setAllowHeaders($req, $rsp);
    }
    else {
        $this->setOrigin($req, $rsp);
        $this->setExposeHeaders($req, $rsp);
        $this->setAllowCredentials($req, $rsp);
    }
}
/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
    public function handle($request, Closure $next) {
        if ($request->isMethod('OPTIONS')) {
            $response = new Response("", 200);
        }
        else {
            $response = $next($request);
        }
        $this->setCorsHeaders($request, $response);
        return $response;
    }
}

и убедитесь, что он используется для работы CorsMiddleware

$app->routeMiddleware([
    'CorsMiddleware' => App\Http\Middleware\CorsMiddleware::class,
]);