使用 VUEJS 在 axios 上发布 Codeigniter3 403 错误答案

【问题标题】：Codeigniter3 403 error on axios post with VUEJS使用 VUEJS 在 axios 上发布 Codeigniter3 403 错误
【发布时间】：2020-09-08 16:03:16
【问题描述】：

当我尝试使用 codeigniter、vuejs 和 axios 发布表单时出现 403 错误。我在论坛和互联网上尝试了很多方法来解决这个问题，但没有任何效果。这是代码，谢谢你的帮助。

P.D：当我必须将其更改为普通 html 表单时，代码正在使用表单助手 (form_open) 我收到 403 错误...我认为问题是 csrf 令牌

Codeigniter 配置

$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_token_idic';
$config['csrf_cookie_name'] = 'csrf_cookie_idic';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;
$config['csrf_exclude_uris'] = array();

VUEJS 和 axios

 var app = new Vue({
    el: '#app',
    data: function() {
        return {
            table: [{
                n_muestra: '',
                descripcion: '',
                lote: '',
                cantidad: '',
                n_planilla: '',
                ot_interna: '',
                delete: false                
            }],
            cant_filas: 1,
            csrf_token_idic: '<?= $this->security->get_csrf_hash(); ?>',
        }
    },
    methods:{
        validateBeforeSubmit(e) {
            e.preventDefault();
            axios.defaults.withCredentials = true
            window.axios.defaults.headers.common['X-CSRF-TOKEN'] = this.csrf_token_idic;

            this.$validator.validateAll().then((result) => {
            if (result) {

                data= { 
                    'csrf_token_idic': this.csrf_token_idic,
                    'data': this.table
                }

                axios.post(baseUrl+'create/add_internal_work_orders/'+'<?php echo $this->uri->segment(3)?>' ,data)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
                return;
            }else{
                alert("no");
            }

        });
        }
    }
})

浏览器预览

caption

【问题讨论】：

403 可能是网络服务器问题，可能与您的代码无关，例如权限。或者路线 - 你有 POST 的路线吗？
@Don'tPanic 是的！...它与 form_open 帮助程序正常工作...但我将其更改为 html 表单并使用 vue 处理请求...并开始失败...我认为问题是crsf

标签： codeigniter vue.js axios csrf

【解决方案1】：

您必须以FormData的形式传递数据。

例如：

在php页面中使用：

<?php
 $csrf = array(
  'name' => $this->security->get_csrf_token_name(),
  'hash' => $this->security->get_csrf_hash()
 );
?>

  new Vue({
            el: '#app',
            data() {
                return {
                    token_name: '<?= $csrf['name']; ?>',
                    token_hash: '<?= $csrf['hash']; ?>',
...

methods: {
validateBeforeSubmit(){
var bodyFormData = new FormData();
bodyFormData.append(this.token_name, this.token_hash);
bodyFormData.append('firstname', 'Joe');
bodyFormData.append('lastname', 'Backer');
bodyFormData.append('age', 31);
axios.post(baseUrl+'create/add_internal_work_orders/'+'<?php echo $this->uri->segment(3)?>', bodyFormData)
  .then(response => {
    console.log(response);
  });
}

https://codeigniter.com/userguide3/libraries/security.html?highlight=security

【讨论】：