Question

所以我正在用VueJS编写一个前端项目。我已经有一个提供API的自定义快速后端。不一定是问题，但是当我使用axios时，cookie会随请求一起传递。即使我将'withCredentials：false'设置为默认设置。

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

您可以看到两种异步方法；即使设置为false，“ getMe”方法仍会将cookie发送到后端。该cookie是从登录时的后端设置的，它是一个httpOnly cookie，其中包含JSON令牌以进行后端身份验证。显然，在现实世界中，我想发送凭据。但我注意到它默认情况下会发送cookie，并且当被告知为false时。

有什么我想念的吗？如果我使用Fetch（）API并使用“凭据：'忽略'”，则cookie不会发送到后端。

这是从CLI创建的全新的干净VueJS 2项目。我正在做的唯一“特殊”事情是自定义代理，因此请求被代理到后端。

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

如果我在GET请求的后端中使用console.log req.cookies，我会得到：

{
  authToken: 'RANDOM JSON TOKEN'
}

即使'withCredentials：false'，Axios仍将cookie发送到后端

0 个答案: