使用 Axios-Post 提交数据

vue-resource 之后, axios 是 vue 官方首推的网络请求组件

axios简介

它的功能更强大,而且可以无痛迁移到新的项目当中,有尤大的原话就是:

最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用,但以后不再把 vue-resource 作为官方的 ajax 方案。
这里可以去掉 vue-resource,文档也不必翻译了。
原文链接

这里还有一份看两眼就是能用的手册

关于 csrf 攻击

这篇文章想说的不是怎么用 axios,而是之前碰到了一种情况,就是在 php 框架当中,碰到了 csrf 验证的问题
关于 csrf 攻击这里也不会讲,因为前辈们已经说的很详细了,比如这篇通俗易懂的文章

axios 与 csrf-token

我常用的两个框架中 laravel 是支持在 header 中设置 csrf-token 的,而 yii 中的默认设置只是在表单
提交的内容中检测 csrf-token 相关的字段,使用 axios 提交内容的时候默认并不会出现在 from-data
内容当中,比如这样提交的

1
2
3
4
5
6
7
8
9
10
11
12
13
let postUrl = '/route/to/action';
let postData = {
id : 1,
name: "xiaoming",
_csrf_token : "<?= Yii::$app->request->csrfToken ?>"
}
axios.post(postUrl,postData)
.then(function(res){
console.log(res)
})
.catch(function (error) {
console.log(error)
})

但是这样的提交形式在 yii2.0 当中是接收不到提交的内容的,因为它的内容是存在了 request payload当中
所以使用Yii::$app->request->post()是获取不到内容的,想要得到提交的内容需要这样:

1
2
3
4
5
function requestPayload(){
$request_payload = file_get_contents('php://input');
return json_decode($request_payload,true);
}
print_r(requestPayload());

这样做的缺点就是获取请求都是自己去实现,而不是通过框架的 request 类去处理
这么做的前提还是关闭所提交 controller 的 csrf-token 验证,不安全啊同志们!

那么问题来了,用什么样的姿势提交能让框架去识别并自动提取出来 csrf-token 呢?

说了那么多废话终于到正题了,关键就是这个类了:

1
2
3
4
5
6
7
8
9
10
11
12
13
let postUrl = '/route/to/action';
let postData = new FormData();
postData.append('action', 'ADD');
postData.append('param', 0);
postData.append('_csrf_token', '<?= Yii::$app->request->csrfToken ?>');
axios.post(postUrl,postData)
.then(function(res){
console.log(res)
})
.catch(function (error) {
console.log(error)
})

在这之前 bb 了那么多也是想让自己的印象更清晰一点,边说边捋思路,这是当初找到答案的地方github

这个博客有个赞赏功能,不试一下吗?