Requête bloquée par les CORS policy
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 :
Citation:
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:
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:
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:
ACCESS_CONTROL_ALLOW_ORIGIN=http://frontend.local:3080
Je charge ce middleware depuis le fichier Kernel.php de mon application Laravel comme suit :
Code:
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.
