web-dev-qa-db-fra.com

Axios n'enverra pas de cookie, Ajax (xhrFields) convient parfaitement

Utiliser Axios

export function sendAll() {
  return (dispatch) => {
    dispatch(requestData());
    return axios({
      method: 'POST',
      url: `${C.API_SERVER.BASEURL}/notification/sendAll`,
      data: {prop: 'val'},
      // responseType: 'json',
      headers: {
        'Content-Type': 'application/json'
      },
      withCredentials: true
    }).then((response) => {
      dispatch(receiveData(response));
    }).catch((response) => {
      dispatch(receiveError(response));
      // dispatch(pushState(null, '/error'));
    })
  }
};

Résultat avec Axios

 Chrome network tab when using Axios

Utiliser $ .ajax

$.ajax({
  url: " http://local.example.com:3001/api/notification/sendAll",
  method: "post",
  data: {},
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  }
})

Résultat avec $ .ajax

 Chrome network tab when using $.ajax

Je ne parviens pas à forcer Axios à envoyer un POST lorsque je tente de joindre des données à POST (le cookie n'est envoyé d'aucune façon). La configuration de mon serveur (express):

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", `${C.PROTOCOL}://${C.DOMAIN}:${C.PORT}`);
  res.header("Access-Control-Request-Headers", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

Je n'ai pas défini d'itinéraire OPTIONS. Je veux qu'Axios envoie POST avec cookie.

router.post('/notification/sendAll', function (req, res, next) {
  res.sendStatus(204);
  // ...
});
javascriptajaxaxios
5
michael

Je faisais face à un problème similaire. Faire une demande get/post via Axios n’a pas envoyé les mêmes en-têtes qu’une demande XHR directe.

Ensuite, je viens d'ajouter ce qui suit juste après l'instruction Axios require:

axios.defaults.withCredentials = true;

Après cela, Axios a commencé à envoyer mon cookie comme le faisait la requête XHR habituelle.

17
Danielo515

Exemple de travail utilisant Danielo515 answer:

import * as axios from 'axios';
axios.defaults.withCredentials = true;


export function getAll() {
    const url = 'https://example.com';
    return axios.get(url);
}
0
jinzo21