使用 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

文章目录

axios简介

关于 csrf 攻击

axios 与 csrf-token