React App：CORB 正在阻止我的请求（通过 Axios），即使响应中存在 Access-Control-Allow-* 标头[重复]

Question

我正在尝试从我的 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 阅读了this，它说只有某些 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!：

Answer 1

在找到解决方案一段时间后，我决定使用普通的 application/x-www-form-urlencoded 而不是 application/json 发送请求。

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

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));