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

软件资讯1年前 (2023)发布 admin
99 0

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属性。
© 版权声明

相关文章

暂无评论

暂无评论...