Communication API-Front (CORS)

Bonjour,

Je suis nouveau dans le dev Web est je suis bloqué sur un problème certainement simple.

J'ai mon backend en php (http://localhost:8080/) qui n'est autre qu'une api REST. et mon front en VueJs(http://localhost:8000) qui communique avec mon API grâce à axios.

Mon schéma est le suivant,

- J'envoie une requête POST à l'adresse /login avec mes identifiant
- Le backend regarde dans la base de donnée et me retourne un cookie avec un token JWT
- à chaque nouvelle requête je dois renvoyer le token dans le cookie pour vérification par le backend


Quand je simule avec POSTMAN tout fonctionne, mais avec mon Front en VueJs rien ne marche ci dessous le code de ma connexion :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

let credential = { email: data.email, password: data.password, }; axios.post("http://localhost:8080/login",credential,{ headers : { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, withCredentials: true }) .then(user =>{   console.log(user.data); }) .catch(function(error) {   console.log(error); });

---

j'ai bien un code 200 avec la réponse mais mon cookie n'est pas sauvegardé et de plus il n'est pas renvoyé automatiquement lors d'une prochaine requête.

Alors comment faire ?

Salut,

C'est exactement le schéma que je suis sur mon projet, et je n'ai pas de souci.
La différence, c'est que je crée une instance d'axios pour la paramétrer. En effet, withCredentials doit être positionnée à chaque appel il me semble

Quelque chose comme ca:

fichier my-axios.js:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

import axios from 'axios';   const myAxios = axios.create({ headers : { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, withCredentials: true, }) export default myAxios;

---

Ensuite tu peux import axios depuis my-axios à la place du module:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import axios from './my-axios';   //... let credential = { email: data.email, password: data.password, }; axios.post('http://localhost:8080/login', credential) .then((data) => { console.log(data); }) .catch((e) => { console.error(e); });

---

A noter que tu peux éventuellement ajouter d'autres options intéressantes telles que baseURL:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

import axios from 'axios';   const myAxios = axios.create({ headers : { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, baseURL: 'http://localhost:8080', withCredentials: true, }) export default myAxios;

---

Ce qui peut simplifier tes appels par la suite

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import axios from './my-axios';   //... let credential = { email: data.email, password: data.password, }; axios.post('/login',credential) .then((data) => { console.log(data); }) .catch((e) => { console.error(e); });

---