Discussion :

[Jeannot_Lapin]

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 :

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
 
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 ?

[gwyohm]

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 :

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

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 :

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

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 :

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

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 :

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

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);
  });