0

我正在尝试从我的 React 应用程序（通过 Axios）向我用 PHP 编写的服务器端 API 发出 POST 请求。

我已经在响应端添加了这些标头。

header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE' );
header( 'Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, X-PINGHEADER' );

但我现在面临的问题是，

来自控制台的警告

我知道它发出了 POST 请求，但它阻止了通过它发送的 post 数据。我从 Mozilla 读到这个，它说只有某些 Content-Type 允许通过 CORS，但我需要以 application/json 格式发送我的数据。

我确实将请求的 Content-Type 标头更改为 x-www-form-urlencoded 并且它确实收到了数据，因为似乎 CORS 不会阻止它。但是当我把它改回 application/json 时，它没有。

这是我的 React 应用程序的请求代码。

import axios from 'axios';

const api = axios.create({
    baseURL: CONST.API_URL,
    params: {
        key: process.env.REACT_APP_API_KEY
    }
});

api.post('/create_user', { username: "johndoe" }).then(o => {
    // something goes here..
    const { data } = o;
    console.log(data.message);
}).catch(e => console.error(e));

这是我的示例回复：

<?php
header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE' );
header( 'Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, X-PINGHEADER' );

$username = $_POST['username'];
$response = array(
    "message" => "Hello $username!",
);

echo json_encode($response);
exit;
?>

如您所见， $username 具有空白值，因为 CORB 事物阻止了发布数据。

我期望Hello johndoe!上面的代码：

4

1 回答 1

0

在找到解决方案一段时间后，我决定使用正常application/x-www-form-urlencoded而不是application/json.

然而，PHP$_POST以一种非常奇怪的方式从 Axios 接收数据（如果基于我在上面问题中提供的代码）。Axios 将其{ username: "johndoe" }作为字符串发布，因此它成为$_POSTPHP 中的键，如下所示：

Array(
    [{"username":"johndoe"}] => ""
)

为了解决这个问题，我使用qs.stringify()方法在发布之前先对数据进行序列化。因此，最终代码将是：

import qs from 'qs';
import axios from 'axios';

const api = axios.create({
    baseURL: CONST.API_URL,
    params: {
        key: process.env.REACT_APP_API_KEY
    }
});

api.post(
    '/create_user',
    qs.stringify({username: "johndoe"}),
    {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }
)
    .then(o => {
        // something goes here..
        const { data } = o;
        console.log(data.message);
    }).catch(e => console.error(e));
于 2019-07-15T14:16:26.027 回答