vue.js - vue-resource發送ajax請求，後台Laravel接收到formData的資料為空

Question

vuejs使用vue-resource傳送ajax請求代碼：

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) => {

                    });
                }
            }

這是ajax請求發送的資料截圖：

ArticleController

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

問題：
dd($request->publishing_days); 的結果是null，怎麼回事呢？

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