vue.js – vue-resource sendet eine Ajax-Anfrage und die von Laravel im Hintergrund empfangenen formData sind leer.

Question

vuejs verwendet Vue-Ressource, um den Ajax-Anfragecode zu senden:

methods: {
                fillIn: function (index, n) {
                    var formData = new FormData();
                    var itemId=this.items[index].id;
                    this.items[index].publishing_days = n;
                    formData.append('publishing_days', n);

                    this.$http.patch('/article/'+itemId, formData,{
                        before(request) {
                            if (this.previousRequest) {
                                this.previousRequest.abort();
                            }
                            this.previousRequest = request;
                        }
                    }).then((response) => {

                    }, (response) => {

                    });
                }
            }

Dies ist ein Screenshot der von der Ajax-Anfrage gesendeten Daten:

ArticleController

    public function update(Request $request, $id)
    {
        $article = Article::findOrFail($id);
        dd($article);
        dd($request->publishing_days); 
    }

Frage: Das Ergebnis von
dd($request->publishing_days); ist null, was ist los?

Answer 1

如图，emulateJSON属性你可设置了？

vue-resource

Answer 2

这是因为header头的问题，web服务器无法处理put, patch和delete这种rest风格的请求，启用该选项后，请求会以普通的post方法发出；

---

在vue-resource文档中，有这样一句话：

Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header

所有我们在代码中加上这个属性并将值设置为true即可：

this.$http.patch('/demo', formData, {emulateHTTP: true});

---

再对比一下header头：

加上属性后：
X-CSRF-TOKEN:ngenvCDnCOXWkQqbLjIdSo7Ekq7wjfLg0TqUMNcu
X-HTTP-Method-Override:PATCH
X-Requested-With:XMLHttpRequest


加上属性前：
X-CSRF-TOKEN:ngenvCDnCOXWkQqbLjIdSo7Ekq7wjfLg0TqUMNcu
X-Requested-With:XMLHttpRequest