axios中cookie跨域及相关配置的示例分析

Sample Analysis of cookie Cross-domain and related configurations in axios Comprehensive Development Information

Axios中cookie跨域示例

Ajax请求跨域时，默认不会发送cookie等用户认证信息，需要开发者在前端请求和后端响应中做一定配置，才能实现跨域情况下的cookie传递。这里以Axios为例，分别介绍相关配置。

1. 开启withCredentials

Axios在调用时，可以通过withCredentials方法开启cookie的跨域传递。以下是一个发送POST请求的示例：

axios.post('http://www.example.com/api', {
  withCredentials: true,
  data: {
    // 发送的数据
  }
}).then(response => {
  // 请求成功
}).catch(error => {
  // 请求失败
})

2. 后端设置Access-Control-Allow-Origin

后端服务需要设置Access-Control-Allow-Origin头部信息，允许指定来源的请求跨域访问。具体如下：

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:8080");// 指定允许跨域的域
  res.header("Access-Control-Allow-Credentials", "true");// 允许带上cookie
  next();
});

3. 前端设置axios.defaults.withCredentials

可以将Axios的全局配置，设置为允许withCredentials属性，使之后的请求都支持cookie跨域传递。如下示例：

import axios from 'axios'
axios.defaults.withCredentials = true
axios.get('http://www.example.com/api')
.then(response => {
  // 请求成功
}).catch(error => {
  // 请求失败
})

相关注意事项

• 该方法只适用于跨域情况，同域请求cookie无需处理；
• withCredentials会影响当前域名下所有请求，如果有特殊情况需要单独处理，请使用interceptors实现；
• 一定要注意设置Access-Control-Allow-Origin，否则即使前端设置了withCredentials，在后端也不能正常传递cookie；
• 在Chrome 80以及以上版本中，默认禁止跨域cookie发送，请在后端设置SameSite属性。