$_POST 未读取 Axios 发布参数

Question

所以我有这个代码：

axios({
    method: 'post',
    url,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: {
        json,
        type,
    }   
})

最初我有正常的 axios.post 但我改成了这个，因为我认为这可能是 header 的问题。但是，我仍然没有在 $_REQUEST 和 $_POST 中检测到任何内容。但是，它正在 file_get_contents("php://input") 中接收数据。

知道哪里出了问题吗？

编辑

好的，我想我知道出了什么问题。它以 json object 的形式发布，因此只能在 php://input 中读取。如何在axios中将其更改为普通字符串？

Answer 1

来自 the documentation（我没有在引用的 material 中保留链接）：

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON.

PHP 不支持 JSON 作为填充 $_POST.

的数据格式

它只支持机器可处理的格式natively supported by HTML forms:

application/x-www-form-urlencoded
multipart/form-data

To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

Browser

In a browser, you can use the URLSearchParams API as follows:
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params); 
Note that URLSearchParams is not supported by all browsers, but there is a polyfill available (make sure to polyfill the global environment).

Alternatively, you can encode data using the qs library:
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

或者您可以自定义 PHP，以便它可以根据 this answer 在另一个问题上处理 JSON。

Answer 2

var params = {
    data1: 'string',
}

axios.post(url, params).then(function(response) {
    //code here 
});

或

axios.post(url, {data1: 'string' }).then(function(response) {
    //code here 
});

api

$_POST = json_decode(file_get_contents("php://input"),true);
echo $_POST['data1'];

Answer 3

只是想分享一下我的见解，我遇到了类似的问题并通过以下代码集解决了

JS

const instructions_str = {
  login: {
    "type": "devTool",
    "method": "devTool_login",
    "data": {
        "username": "test",
        "password": "Test@the9" 
    }
  },
  tables: {
    "type": "devTool",
    "method": "devTool_get_all_tables",
    "data": ""
  }
};

const body = {
    firstName: 'Fred',
    lastName: 'Flintstone',
    name: "John",
    time: "2pm",
    instructions : JSON.stringify(instructions_str)  
};

function decodeData(data) {
  const serializedData = []

  for (const k in data) {
    if (data[k]) {
      serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
    }
  }

  return serializedData.join('&')
};

const body2 = decodeData(body);

axios.post('URL', body2)
  .then(response => {
    console.log("contextApi got it", response);
  }).catch(error => {
      console.log("contextApi error.response", error.response);
  });

PHP

// set content return type
header('Content-Type: application/json');

// Setting up some server access controls to allow people to get information
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods:  POST, GET');

// This way I can check and see what I sent
$postVars_array = $_POST ?? parse_str(file_get_contents("php://input"),$postVars_array) ?? [];
echo json_encode($postVars_array);

我还发现此 github 页面非常有用 https://github.com/axios/axios/issues/1195

Answer 4

使用PHP标准对象

使用PHP std对象结构获取post的变量。

客户端：

axios.post(url, {id: 1 , Name:'My Name' }).then(function(response) {
    console.log(response.data);
});

在服务器上

$obj = json_decode(file_get_contents('php://input'));   
$id = $obj->id;
$Name = $obj->Name;    

//test by returning the same values
$retObj=(object)["id"=>$id,"Name"=>$Name]
echo json_encode($retObj);

jQuery 和 Axios 使用相同的 PHP 文件

如果你有一个文件从 axios 和 jquery 接收 post 你可以使用：

if($_SERVER['REQUEST_METHOD']==='POST' && empty($_POST)) {
   $_POST = json_decode(file_get_contents('php://input'),true); 
}

将 Axios json-序列化的 post 转换为 $_POST 数组

Answer 5

如果您决定在 AJAX 库或服务器语言之间切换，让事情变得更简单和通用。使用 axios 使用原生 JS FormData.
如果您的数据在 object 中，您可以像这样将其转换为 FormData：

var myDataObj = {id:1, name:"blah blah"}
var formData = new FormData();


for (var key in myDataObj) {
    formData.append(key, myDataObj[key])
}

然后你发送数据：

axios.post('/sub/process.php', formData, {
    params: { action: "update-user" },
    headers: { 'Content-Type': 'multipart/form-data' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

注意，您还可以在 axios 中使用 params 发送一些信息，您可以使用 $_GET 检索这些信息。另请注意，我使用的是 baseURL，以防您的网页和 API 端点有不同的服务器。
您还需要了解，在 axios 发送真正的请求之前，它会执行一个 preflight 请求。 A preflight request, is a mechanism in CORS by the browser to check if the resource destination is willing to accept the real request or not. Afterall, why would a request be sent when the target host is not willing to receive it anyway?

您必须确保您的服务器对您的 axios 请求具有正确的 headers，否则预检请求将检测到不兼容并停止您的请求：

//this is if you are using different different origins/servers in your localhost, * to be update with the right address when it comes to production
header('Access-Control-Allow-Origin: *');
//this is if you are specifying content-type in your axios request
header("Access-Control-Allow-Headers: Content-Type");

现在，您将能够在 $_POST 变量中访问您发送的数据：

echo "<pre>";
print_r($_POST);
echo "</pre>";

此外，axios 允许您发送不同格式的数据。你可以像这样发送一个 json：

axios.post('/sub/process.php', { id: "1", name:"blablah" }, {
    params: { action: "update-item" },
    headers: { 'Content-Type': 'application/json' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

在PHP端，可以这样访问：

$data = json_decode(file_get_contents("php://input"),true);
echo "<pre>";
print_r($data);
echo "</pre>";

Answer 6

此代码今天在 browser/node 上有效。我觉得这个更实用。我在 node.js 上测试了这段代码，并使用 $_POST['param1'] 将数据变量传递给 PHP8，它运行良好。

function axqs(d){
    let p = new URLSearchParams();
    Object.keys(d).forEach(function(key){
        p.append(key, this[key]);
    }, d);
    return p
}

let data = {
  'param1': 'value1',
  'param2': 'value2',
}

let p = axqs(data)
axios.post('/foo', p)

$_POST 未读取 Axios 发布参数

Axios posting params not read by $_POST

javascript

php

reactjs

axios

Using application/x-www-form-urlencoded format

Browser