vue js中的axios將請求作為字符串發送，而不是對象

Question

我該如何解決這個問題？ 這是 main.js 我想通過 vuejs 中的 axios 將名稱發送到服務器但我無法從 $_Request 獲取名稱

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

這是我的模板腳本

export default {

  data() {
    return {
    header:{headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    }},
      name:null,
      r:null,
    }

  },
  methods: {
    post:function(){
      this.$http.post('http://127.0.0.1/saver.php',{
          name:this.name,
        },this.header).then(r => {
       this.r=r;
       // eslint-disable-next-line no-console
       console.log(typeof {name:this.name})
      }).catch(err => {
   // eslint-disable-next-line no-console
   console.log(err.response.data)
});
    }
  },
}
</script>

這是我的 php 服務器端代碼：

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_REQUEST))
{

    print_r($_REQUEST);
}
?>

參數：

這是從服務器返回的響應：

Answer 1

正如Axios 文檔所述，

默認情況下，axios 將 JavaScript 對象序列化為 JSON。 要改為以 application/x-www-form-urlencoded 格式發送數據，您可以使用以下選項之一。

<...>

在瀏覽器中，您可以使用 URLSearchParams API

<...>

或者，您可以使用 qs 庫對數據進行編碼

它應該是：

this.$http.post('http://127.0.0.1/saver.php', qs.stringify({
  name:this.name,
}),this.header)

或者，可以修改服務器端以專門使用 JSON 負載。