Blocked by CORS policy

Default
,

Bonjour à tous,

Voila je rencontre un petit problème avec mon code. J'ai développé une API en Laravel et en utilisant Laragon pour la gestion serveur (Donc c'est un serveur Apache) et j'ai un front développé en VueJS.

Ce que je fais

Je fais donc une requête axios depuis mon front.

axios
                .get('http://api.test/api/events/'+id+'/')
                .then(response => {
                    ...
                })

Ce que j'obtiens

Le problème est que j'ai cette erreur :

Mon erreur :

Access to XMLHttpRequest at 'http://api.test/api/events/2/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Alors qu'avec PostMan cela fonctionne parfaitement.

Ce que j'ai essayé

J'ai lu que c'était un problème de Cross-origin ressource et que le problème vient du serveur qui rejette l'appel. En cherchant un peu j'ai vu qu'il fallait ajouter.

.htaccess

...

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers: "*"

Je l'ai donc fait mais j'ai toujours la même erreur. Que je mette set ou add rien ne change.

I need you ! :)

Si vous avez des idées ou si vous voyez où est mon erreur, faites moi part de votre savoir.

Merci d'avance à tous ceux qui pourront m'aider :)

2 Réponse

44803
,

Salut,

Si ton API est en PHP avec Laravel, tu trouveras surement plus d'aide dans la section "Php" du forum

44227
,

Pour ton problème tu peux utiliser cette extension pour google chrome (pour le développement uniquement)
Ensuite en production tu as juste à autoriser le domaine qui émet les appels vers ton api.