如何在Vue 3中设置CSRF令牌以实现CSRF保护?
时间: 2025-09-08 14:52:20 AIGC 浏览: 6
在Vue 3中设置CSRF令牌以实现CSRF保护,可采用以下方法:
### 从HTML页面获取CSRF令牌
如果CSRF令牌已经包含在HTML页面中(通常是隐藏的输入字段),可以直接通过DOM API获取它的值。
```javascript
// 假设CSRF令牌的输入字段具有id="csrfmiddlewaretoken"
const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
```
### 使用Django的csrf_token模板标签
在Django的模板中使用`csrf_token`模板标签插入CSRF令牌,然后在Vue组件中获取。在Vue组件中可以通过JavaScript来获取CSRF令牌:
```javascript
// 在Vue 3组件中
const csrfToken = document.querySelector('[name="csrf-token"]').getAttribute('content');
```
### 将CSRF令牌添加到请求头
在使用Axios等HTTP客户端发送请求时,将获取到的CSRF令牌添加到请求头中。
```javascript
import axios from 'axios';
// 获取CSRF令牌
const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
// 设置请求头
axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
// 发送POST请求
axios.post('/your-api-url/', {
// 请求数据
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
```
### 跨域请求处理
在跨域请求时,需要注意是否携带用户凭证。默认情况下,跨域请求不会携带用户凭证。若要携带,可以设置`axios.defaults.withCredentials = true`,不过这种情况下服务器端也需要进行相应的配置。若不想携带用户凭证,可以把从cookie取来的CSRF令牌自定义放到请求头里面。
```javascript
import axios from 'axios';
// 从cookie获取CSRF令牌
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const csrfToken = getCookie('csrftoken');
// 设置请求头
axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
// 跨域请求时不携带用户凭证
axios.defaults.withCredentials = false;
// 发送跨域POST请求
axios.post('https://example.com/your-api-url/', {
// 请求数据
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
```
阅读全文
相关推荐


















