Vue.js Vue + axios 不保存 session cookies

在本文中，我们将介绍Vue.js和axios在处理HTTP请求时不保存session cookies的原因以及如何解决这个问题。

问题描述

在使用Vue.js和axios进行前后端交互时，我们经常需要将session cookies发送到服务器以进行身份验证和会话持久化。然而，使用axios发送请求时，我们发现服务器并不保存session cookies，导致认证失败或无法保持用户的登录状态。

问题原因

这个问题的原因是因为axios不会自动保存和发送跨域请求的cookies。当我们使用axios发送跨域请求时，浏览器会在响应中接收到Set-Cookie头部字段，该字段包含了session cookies的值，但默认情况下，浏览器不会将这些cookies保存起来。因此，下一次发送请求时，axios并不会自动发送之前接收到的cookies，导致服务器无法正确识别用户。

解决方案

为了解决这个问题，我们可以使用axios的withCredentials配置选项。这个选项允许我们在发送跨域请求时携带cookies，以便服务器能够正确存储和识别用户的会话状态。

首先，我们需要在创建axios实例时将withCredentials选项设置为true。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com',
  withCredentials: true
});

现在，当我们使用这个axios实例发送请求时，它会自动携带上一次接收到的cookies。

instance.get('/user').then(response => {
  console.log(response.data);
});

这样，服务器就能够正确处理我们的请求，并保存session cookies。

值得注意的是，服务器端也需要正确设置响应头部，允许跨域请求携带cookies。可以在服务器端进行如下配置：

对于Express.js服务器，可以使用cors中间件，并设置credentials选项为true：

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'http://example.com',
  credentials: true
}));

// 其他路由和处理逻辑...

app.listen(3000);

对于其他服务器配置，可以参考相应的文档，确保设置Access-Control-Allow-Credentials响应头部为true。

示例说明

为了更好地理解上述解决方案的实际应用，我们来看一个简单的示例。假设我们有一个使用Vue.js和axios构建的登录页面，我们希望用户登录成功后，服务器能够正确地保存会话状态。

首先，我们创建一个登录组件，其中包含用户名和密码的输入框以及一个登录按钮。

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <input v-model="password" placeholder="请输入密码" type="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/login', {
        username: this.username,
        password: this.password
      }, {
        withCredentials: true
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

在这个示例中，当用户点击登录按钮时，我们使用axios发送一个POST请求到/login路径，并携带用户名和密码。通过将withCredentials选项设置为true，我们确保axios会在发送请求时携带cookies。

然后，在服务器端，我们可以使用Express.js来处理登录请求并正确设置响应头部。

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'http://example.com',
  credentials: true
}));

app.post('/login', (req, res) => {
  // 处理用户登录逻辑...

  // 设置session cookies
  res.cookie('session', 'abcdefg1234567', {
    httpOnly: true,
    secure: true,
  });

  res.end();
});

app.listen(3000);

在这个示例中，当服务器收到登录请求后，它会处理用户的登录逻辑，并使用res.cookie方法设置session cookies。我们通过设置httpOnly选项为true和secure选项为true来增加cookies的安全性。

这样，当用户登录成功后，服务器会正确设置session cookies，从而保持用户的登录状态并在后续请求中识别用户。