文章内容
2023/6/24 23:04:26,作 者: 黄兵
Fetch 提交数据与 CSRF
如果使用 fetch 的方式更新数据，同时后端需要先认证 csrf 数据，如果没有 csrf 数据 则会出现 400 错误。
下面是一个使用 fetch 的方式更新数据，同时提交 csrf 数据的示例：
function changeAPIToken() {
// 点击更改 token 按钮之后触发的动作
const changeButton = document.getElementById('kt_change_token_button');
if (changeButton) {
const tokenInput = document.getElementById('kt_share_earn_link_input');
// 获取CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
// 构造请求头
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('X-CSRF-Token', csrfToken);
// 设置更改 Token 按钮点击事件处理程序
changeButton.addEventListener('click', () => {
// 发送PUT请求获取新的Token
fetch('/dashboard/token', {
method: 'PUT',
headers: headers
})
.then(response => response.json())
.then(data => {
// 更新输入框中的Token
tokenInput.value = data.token;
})
.catch(error => {
console.error('获取新Token失败:', error);
});
});
}
}
// 点击更改 token 按钮之后触发的动作
const changeButton = document.getElementById('kt_change_token_button');
if (changeButton) {
const tokenInput = document.getElementById('kt_share_earn_link_input');
// 获取CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
// 构造请求头
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('X-CSRF-Token', csrfToken);
// 设置更改 Token 按钮点击事件处理程序
changeButton.addEventListener('click', () => {
// 发送PUT请求获取新的Token
fetch('/dashboard/token', {
method: 'PUT',
headers: headers
})
.then(response => response.json())
.then(data => {
// 更新输入框中的Token
tokenInput.value = data.token;
})
.catch(error => {
console.error('获取新Token失败:', error);
});
});
}
}
在上述代码中，我们首先获取页面中的 CSRF令牌，然后在发送 PUT 请求时，将 CSRF 令牌添加到请求头中的X-CSRF-Token字段中。这样，在更改Token之前，您将先提交CSRF数据。
请确保您的页面中包含一个<meta>标签，用于存储CSRF令牌，例如：
<meta name="csrf-token" content="{{ csrf_token() }}">
确保将YOUR_CSRF_TOKEN替换为实际的CSRF令牌值。
参考资料：
1、ChatGPT
其它相关推荐：
1、has been renamed to "CSRFProtect" and will be removed in 1.0.
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - Fetch 提交数据与 CSRF
评论列表