axios携带cookie的get请求

在前后端分离的开发模式中，前端与后端的交互通常通过API接口进行。而在某些场景下，我们可能需要在请求中携带cookie信息，以进行身份验证等操作。本文将介绍如何使用axios库发送带有cookie的get请求。

什么是axios？

[axios]( 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中发送 HTTP 请求。它具有简洁的API和强大的功能，成为了前端开发中常用的HTTP请求工具。

使用axios发送get请求

要发送一个简单的get请求，我们可以使用axios的get方法。下面是一个基本的例子：

axios.get('/api/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上述代码中，我们发送了一个GET请求到/api/users的API接口，并在成功返回后打印了返回的数据。

携带cookie发送请求

要在请求中携带cookie，我们可以在axios的配置中设置withCredentials参数为true。这样axios会自动发送当前域下的cookie信息到服务器。

axios.get('/api/users', {
  withCredentials: true
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

后端设置允许携带cookie

在前端设置好携带cookie的请求后，还需要在后端进行相应的配置。以Node.js和Express框架为例，我们需要设置响应头的Access-Control-Allow-Credentials为true。

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Credentials', true);
  next();
});

这样，后端就允许前端发送带有cookie的请求了。

示例

下面是一个完整的示例，展示了如何使用axios发送带有cookie的get请求：

// 前端代码
axios.get('/api/users', {
  withCredentials: true
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

// 后端代码
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Credentials', true);
  next();
});

app.get('/api/users', function(req, res) {
  // 处理请求逻辑
  // 返回数据
});

以上代码中，前端发送了一个带有cookie的get请求到/api/users接口，后端设置了允许携带cookie的响应头，并处理了相应的请求逻辑。

总结

本文介绍了如何使用axios发送带有cookie的get请求。首先，我们需要设置请求的withCredentials参数为true，然后在后端设置允许携带cookie的响应头。通过这样的配置，我们可以在前后端分离的开发中，实现带有cookie的身份验证等操作。

参考文档：[axios](