Discussion :

[Chakra Spirit]

Bonjour,

Après de multiples essais et recherches, je ne parviens toujours pas à mes fins, ce pourquoi j'espère trouver un peu d'aide sur ce forum.

J'ai une application dont le frontend est basée sur nextjs et une api produite à partir de Laravel. Pour établir la discussion entre les 2, je passe par la librairie isomorphic-unfetch.

Actuellement, je ne rencontre pas de soucis particulier lorsque je me connecte à l'application ou lorsque je cherche à récupérer des données via des requêtes GET. En revanche, lorsque je souhaite poster des données depuis mon interface, mes requêtes sont bloquées. J'obtiens le message d'erreur suivant :

Access to fetch at 'http://frontend.local:3080/' (redirected from 'http://api.local:3080/api/auth/trainings') from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Je pensais pourtant avoir tout mis en place pour gérer les CORS mais visiblement, quelque chose m'échappe.

Côté frontend

Pour effectuer ma requête, je procède comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fetch('http://api.local:3080/api/auth/trainings', {
            headers: {
                "Authorization": "Bearer " + this.state.token,
                'Content-Type': 'application/json'
            },
            method: 'POST',
            body: JSON.stringify({
                title: this.state.currentTitle
            })
        })
            .then((response) => {
                return response.json();
            })
            .then((datas) => {
                console.log(datas);
            })
            .catch(error => console.log(error));

Côté api

J'ai mis en place un middleware "Cors.php" dont le code est le suivant :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
 
namespace App\Http\Middleware;
 
use Closure;
 
class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Origin', env('ACCESS_CONTROL_ALLOW_ORIGIN'))
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
            ->header('Vary', 'Origin');
    }
}

sachant que la constante ACCESS_CONTROL_ALLOW_ORIGIN est définie dans mon fichier .env :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

ACCESS_CONTROL_ALLOW_ORIGIN=http://frontend.local:3080

Je charge ce middleware depuis le fichier Kernel.php de mon application Laravel comme suit :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
namespace App\Http;
 
use Illuminate\Foundation\Http\Kernel as HttpKernel;
 
class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        ...
        \App\Http\Middleware\Cors::class,
    ];
    ...

Cependant, rien n'y fait, malgré que le middleware est bien censé m'ajouter les headers requis, la requête est tout de même bloquée.

Je remarque, entre autres, que dans le message d'erreur cité précédemment il est indiqué "... from origin 'null' ..." mais je ne comprends pas pourquoi.
Ce qui me chagrine, c'est qu'à certains moments, la requête est passée avec un code identique depuis mon interface (et cette requête POST fonctionne très bien depuis Postman).

Auriez-vous une idée me permettant de résoudre ce problème sur lequel j'ai déjà perdu de très nombreuses heures ?

Cordialement.

[Chakra Spirit]

Bon... Lorsque je modifie l'url de la constante ACCESS_CONTROL_ALLOW_ORIGIN dans mon fichier .env (par exemple en enlevant le "t" de "frontend"), j'obtiens ceci :

Access to fetch at 'http://api.local:3080/api/auth/trainings' from origin 'http://frontend.local:3080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://fronend.local:3080' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Pourquoi, en somme, mon url fait-elle disparaître le header Access-Control-Allow-Origin et que lorsque je mets une url erronée, le header réapparaît juste pour m'envoyer paître ?

[Chakra Spirit]

Je suis tombé sur ce sujet (visiblement non résolu) : https://www.developpez.net/forums/d1...rigin-request/

... et j'ai bien tenté de virer mon middleware pour installer en lieu et place le module https://github.com/barryvdh/laravel-cors et ce, en suivant scrupuleusement la doc'.

Le résultat fût exactement le même : blocage de la requête.

Il y a quelques mois, j'avais déjà tenté l'installation de ce package sur un autre projet mais je m'étais heurté, là encore, au même soucis et c'est justement ce qui fait que j'en étais venu à faire mon middleware à la main, ce qui avait alors fonctionné.

Là, je viens de virer le package pour remettre mon middleware et je n'arrivais même plus à me connecter à mon appli.

Aussi, il semble bien y avoir des soucis avec la prise en compte de quelques variables dans le fichier .env. Parfois, ça retourne bien "null" au lieu de la valeur indiquée.
D'après ce que j'ai compris, dans ce cas, il vaut mieux définir une variable dans config/app.php et que ce soit cette dernière qui fasse référence à la variable du fichier .env.
Pourquoi ? Mystère...

J'ai donc modifié mon middleware comme suit :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Support\Facades\Config;
 
class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Origin', Config::get('app.cors'))
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
            ->header('Vary', 'Origin');
    }
}

en prenant soin de modifier la config app.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?php
 
return array(
 
    'cors' => env('ACCESS_CONTROL_ALLOW_ORIGIN', 'http://frontend.local:3080'),
    ...

Après, la différence que j'ai constaté, c'est que maintenant, je dois lancer une commande supplémentaire pour que ce soit pris en compte :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

php artisan config:cache

... mais - au bonheur ! - j'ai dès lors pu me reconnecter.

Il n'empêche que je ne peux toujours pas lancer la moindre requête POST une fois connecté (mon problème d'origine donc...)

C'est juste désespérant tant ça semble instable.

En somme, j'ai bossé de 5h30 hier à... 2h15 ce matin pour, au final, avoir le cerveau en bouillie et constater que j'aurai mieux fait de ne pas bosser du tout vu que j'en suis exactement au même point que lorsque j'ai commencé.

Je vais me coucher. Raz le bol.

[Chakra Spirit]

Pas de changement.

J'ai parcouru ces articles sur les cors :

- https://www.html5rocks.com/en/tutorials/cors/
- https://javascript.info/fetch-crossorigin

ou encore ce post au sujet de la redirection qui s'effectue :

- http://blog.dzhuvinov.com/?p=979

... mais je ne m'en sors pas car je ne vois pas pour autant d'où vient l'erreur.
À priori, il semble que mon soucis soit en rapport avec ce dernier lien mais je ne vois pas comment intervenir.

Pour le moment, je tombe de manière récurrente sur le problème cité lors de ma seconde intervention :

Le header Access-Control-Allow-Origin n'est pas reconnu lorsque j'indique la bonne url mais m'indique que ce même header est erroné lorsque je mets une mauvaise url

Bref, j'ai véritablement besoin d'aide.

J'arrive à me connecter en passant justement par une requête POST sur le même domaine alors pourquoi une fois connecté, une requête formée de manière identique (avec l'ajout du header Authorization) ne fonctionne-t-elle pas ?

Je ne demande pas forcément une solution toute faite mais comment procéderiez-vous pour résoudre ce problème s'il vous plait ?

[tindal35]

Bonjour, la requête pourrait fonctionner en ajoutant ceci dans ton header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

credentials: 'same-origin'

J'ai aussi retrouvé un code que j'utilisais il y a 3 ou 4 ans avec laravel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// CSRF PROTECTION
export function initAjax() {
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	})
}

Bon courage, je sais que ce genre de problème est vraiment prise de tête...

[gwyohm]

j'ai pas tout lu du thread, laid t'as mis ça très haut dans ton php ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<?php
 header("Access-Control-Allow-Origin: *");