Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Axios still sending cookies to back end even if 'withCredentials: false'

So I am writing a frontend project in VueJS. I already have a custom express backend serving an API. It's not necessarily an issue, but when I use axios, the cookies are being passed with ever request; even if I set 'withCredentials: false' and by default.

<template>
  <div>
    <h1>Login Vue</h1>
    <input
      type="text"
      name="username"
      v-model="input.username"
      placeholder="Username"
    />
    <input
      type="password"
      name="password"
      v-model="input.password"
      placeholder="Password"
    />
    <button type="button" v-on:click="login()">Login</button>
    <button type="button" v-on:click="getMe()">GetMe</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data: function() {
    return {
      input: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    login: async function() {
      const user = await axios.post(
        `/api/v1/users/login`,
        {
          username: this.input.username,
          password: this.input.password,
        },
        { withCredentials: true }
      );
      console.log(user);
    },

    getMe: async function() {
      const me = await axios.get(`/api/v1/users/me`, {
        withCredentials: false,
      });
      console.log(me);
    },
  },
};
</script>

You can see the two async methods; the 'getMe' method will still send cookies to the backend even if set false. The cookie is set from the backend on login, it's a httpOnly cookie with an JSON token in it for backend authentication. Obviously in the real world, I would want to send credentials; but I noticed it was sending cookies by default and when told false.

Is there something I am missing? If I use the Fetch() API and use "credentials: 'omit'" the cookies are not sent to the backend.

This is a brand new clean, VueJS 2 project created from the CLI. The only 'special' thing I am doing it a custom proxy so requests are proxied to the backend.

// vue.config.js;
module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:3010',
      },
    },
  },
};

If I console.log req.cookies in the backend on the GET request i get:

{
  authToken: 'RANDOM JSON TOKEN'
}
like image 617
Eric Christensen Avatar asked Nov 24 '25 12:11

Eric Christensen


1 Answers

withCredentials only applies to cross-origin requests (which have to ask for explicit permission (per the CORS specification) before including cookies).

like image 165
Quentin Avatar answered Nov 27 '25 01:11

Quentin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!