-2
votes

CORS angulaire / Laravel

Je crée une application Laravel / Angular et j'essaye de connecter les deux pour mon implémentation de connexion.

Lorsque je me connecte, j'obtiens un code de réponse 200 ok depuis l'onglet réseau. Dans la console, j'obtiens ce qui suit.

L'accès à XMLHttpRequest à ' http://127.0.0.1:8000/api/auth/login ' depuis l'origine ' http: // localhost: 4200 ' a été bloqué par la stratégie CORS: le champ d'en-tête de la requête content-type n'est pas autorisé par Access -Control-Allow-Headers dans la réponse de contrôle en amont. login.component.ts: 26
HttpErrorResponseÂ {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: " http://127.0.0.1:8000/api/auth/login ", ok: false, Â â € ¦}

J'ai créé un middleware nommé Cors.php

Route::group([

    'middleware' => ['api', 'cors'],
    'prefix' => 'auth'

], function ($router) {

    Route::post('login', 'API\AuthController@login');
    Route::post('logout', 'API\AuthController@logout');
    Route::post('refresh', 'API\AuthController@refresh');
    Route::post('me', 'API\AuthController@me');

});

Ceci est enregistré dans mon noyau comme ceci

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

protected $routeMiddleware = [
        'cors' => \App\Http\Middleware\Cors::class, 
    ];

Il est également appelé dans mon fichier de routes api.php comme ceci

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

Toute idée de ce qui se passe.

php laravel angular cors

0 commentaires

3 Réponses :

1
votes

L'ajout du middleware Cors à $middlewares applique le middleware globalement dans votre application, il n'est donc pas nécessaire d'appeler le middleware via le api.php .

De plus, il vous manque l'en ->header('Access-Control-Allow-Headers');

L'en-tête de réponse Access-Control-Allow-Headers est utilisé en réponse à une demande de contrôle en amont qui inclut les en-têtes de demande de contrôle d'accès pour indiquer quels en-têtes HTTP peuvent être utilisés pendant la demande réelle.

0 commentaires

0
votes

Changez votre code en:

Route::group([

'middleware' => ['api'],
'prefix' => 'auth'

], function ($router) {

   Route::post('login', 'API\AuthController@login');
   Route::post('logout', 'API\AuthController@logout');
   Route::post('refresh', 'API\AuthController@refresh');
   Route::post('me', 'API\AuthController@me');

});

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

protected $routeMiddleware = [
 //do not add Cors here
];

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
        OPTIONS')
        ->header('"Access-Control-Allow-Headers"', '*');
}

0 commentaires

0
votes

changez simplement Cors.php comme ceci:

        $response = $next($request);
    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, DELETE');
    $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
    $response->header('Access-Control-Allow-Origin', '*');
    return $response;

0 commentaires