CORS Laravel VueJS

Le problème auquel vous êtes confronté est lié à la même politique d'origine. vous pouvez en savoir plus sur le site Mozilla ( https: // developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control ). il s'agit essentiellement d'un accès non autorisé prouvé aux serveurs Web. vous pouvez changer la façon dont votre serveur Web réagit et je suis également dans ce lien que j'ai inclus.

Les serveurs sont utilisés pour héberger des pages Web, des applications, des images, des polices et beaucoup plus. Lorsque vous utilisez un navigateur Web, vous essayez probablement de accéder à un site Web distinct (hébergé sur un serveur). Les sites Web demandent souvent ces ressources hébergées de différents emplacements (serveurs) sur le L'Internet. Les politiques de sécurité sur les serveurs atténuent les risques associés avec la demande d'actifs hébergés sur un serveur différent. Nous allons jeter un coup d'oeil à un exemple de politique de sécurité: même origine.

La politique de même origine est très restrictive. En vertu de cette politique, un document (c'est-à-dire comme une page Web) hébergé sur le serveur A ne peut interagir avec d'autres documents qui sont également sur le serveur A. En bref, le la politique de même origine impose que les documents qui interagissent avec chacun d'autres ont la même origine.

---

Vérifiez cette bibliothèque CORS conçue pour l'utilisation de Laravel. L'installation est simple:

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

Les valeurs par défaut sont définies dans config/cors.php

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

allowedOrigins, allowedHeaders et allowedMethods peuvent être définis sur array ('*') pour accepter n'importe quelle valeur.

À autorisez CORS pour toutes vos routes, ajoutez le middleware HandleCors dans la propriété $ middleware de la classe app / Http / Kernel.php :

return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
];

Si de nouvelles personnes viennent ici pour m'aider, je donne plus de détails.

J'utilise Laragon comme serveur local qui utilise Apache. J'ai essayé de modifier httpd.conf et cela ne change rien.

Quand je mets l'URI dans mon navigateur ça marche, exemple:

http: //api.test/api/events/ renvoie le bon json. < / p>

Et mon erreur a changé:

Accès à XMLHttpRequest à ' http: //api.test/api/events/0 'from origin' http: // localhost: 8080 'a été bloqué par la stratégie CORS: Le' Access-Control- L'en-tête Allow-Origin 'contient plusieurs valeurs' *, http: // localhost: 8080 ', mais une seule est autorisée.

Rééditer, ça marche. J'ai supprimé le middleware cors et mis l'ensemble Access-Control-Allow-Origin dans httpd.conf