axios中cookie跨域及相关配置示例详解

在使用 axios 发送跨域请求时，如果需要在请求过程中携带 cookie，需要在配置中设置相应的参数，本文将详细介绍 axios 中 cookie 跨域的相关配置和示例。

前置知识

在介绍 cookie 跨域前，我们需要先了解跨域请求中常见的几个概念：

• 同源策略（Same Origin Policy）：浏览器的一种安全机制，不同源（协议、域名、端口号中任一不同）之间的页面在访问资源时会受到限制。
• CORS（Cross-Origin Resource Sharing）：可以通过浏览器和服务器之间的额外交换头信息，使得服务器允许浏览器访问来自不同源的资源。
• 预检请求（Preflight Request）：在 CORS 中，复杂请求需要先发送一个方法为 OPTIONS 的预检请求，用于检查服务器是否支持实际请求。

配置示例

在 axios 发送跨域请求时，需要设置 withCredentials 参数为 true，同时需要在服务端设置相应的响应头，允许请求携带 cookie。示例如下：

1. 后端设置响应头

// Node.js示例
const express = require('express')
const app = express()

// 设置允许跨域访问的域名和 header
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization, Accept')
  res.setHeader('Access-Control-Allow-Credentials', true)
  next()
})

1. 前端发送跨域请求

// 通过 axios 实现跨域请求
import axios from 'axios'

axios({
  method: 'post',
  url: 'http://localhost:3000/api',
  data: {
    name: '张三'
  },
  withCredentials: true
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

在上述代码中，我们设置了跨域请求的 url、请求方式为 post、data 中包含请求参数、withCredentials 为 true。当服务端成功响应时，会在浏览器中保存响应 cookie。

1. 发送带 Cookie 的请求

// 在后续请求中携带 cookie
axios({
  method: 'get',
  url: 'http://localhost:3000/api/user',
  withCredentials: true
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

在后续请求中，我们设置了请求参数和 withCredentials，并将服务端保存的 cookie 在请求中携带。这样就能在跨域的请求中保持用户的登录状态。

总结

通过上述配置示例，我们也可以了解到，axios 中的 withCredentials 参数在处理 cookie 跨域时非常重要。同时，CORS 中的预检请求也是实现 cookie 跨域自动处理的关键环节。学习了本文的内容，相信读者也能轻松使用 axios 实现 cookie 跨域请求。