Laravel vue axios 是 ajax 表单需要的 action 方法和 csrf答案

【问题标题】：Laravel vue axios is action method and csrf needed for ajax formsLaravel vue axios 是 ajax 表单需要的 action 方法和 csrf
【发布时间】：2018-12-28 22:03:06
【问题描述】：

我正在使用 axios 和 vue 在 Laravel 中发布一个 ajax，我在表单中有一个 @click="postData" 按钮，用于切换 axios 发布请求：

postData() {
      axios({
          method: 'post',
          url: appJS.base_url + '/comment',
          responseType: 'json',
          data: comData
        })
        .then(function(response) {

        })

但我还需要在表单中添加 action、method 和 csrf 吗？

<form action="{{ url('/comment') }}" method="POST">
{{ csrf_field() }}
</form>

对

<form></form>

使用<form></form> 一切正常，但我想知道是否有任何优点/缺点？

我在后台进行 ajax 调用，因为我不想重新加载整个页面

【问题讨论】：

标签： laravel vue.js axios

【解决方案1】：

你绝对不需要form标签上的action和method属性，因为它们已经在你的axios调用中定义了。

至于csrf_field()，你可能仍然需要它，因为 Laravel 有一个名为 VerifyCsrfToken 的预配置中间件。但这取决于你是否使用它。

【讨论】：

我刚刚看到它包含在 bootstrap.js window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); } 所以我想我不需要包含它然后因为它已经从页面元数据中获取了它？
@Kiow 是的。如果您的csrf-token 有元标记，则无需将其包含在您的表单中。

【解决方案2】：

你可以在vuejs中使用事件表单，你不需要使用ajax，你可以尝试下面的代码，但是如果是laravel + vuejs，需要在laravel中添加Enable CORS for a Single Route:https://gist.github.com/drewjoh/43ba206c1cde9ace35de154a5c84fc6d

export default{
        data(){
            return{
                title:"Form Register",
            }
        },
        methods:{
           register(){
                this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                       console.log(response);
                      
                  });
                    
            },
 
        }
    }

 <form action="" method="post" v-on:submit.prevent="register">
    <div class="panel-heading">{{title}}</div>
    <div class="form-group">
      <button type="submit" class="btn btn-danger">Register</button>
      <button type="reset" class="btn btn-success">Reset</button>                  
    </div>
 </form>

【讨论】：