vue js中的axios将请求作为字符串而不是对象发送

Posted 2023-02-22

【中文标题】vue js中的axios将请求作为字符串而不是对象发送

【英文标题】：axios in vue js send request as string , not object

【发布时间】：2020-05-12 07:33:26

【问题描述】：

我该如何解决这个问题？ 这是 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);

?>

参数：

这是从服务器返回的响应：

【问题讨论】：

@nullisnotundefined 数组 (["name":null] => )

它将它作为字符串发送，JSON 字符串。您为什么不在服务器端使用 JSON 有什么原因吗？如果有，您必须自己对对象进行字符串化，afaik axios 不会以特定方式处理 application/x-www-form-urlencoded。

@EstusFlask 我只想将名称参数发送到服务器并使用 $_Request['name'] 或 $_Post['name'] 获取它我应该进行哪些更改？

【参考方案1】：

正如Axios documentation 所说，

默认情况下，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 有效负载。