ReactJS：获取到本地主机 php 页面的请求

Question

我正在学习 PHP 并将其集成到 reactJS 中。 但是我遇到了一个奇怪的问题，我似乎无法找到解决方案。

下面的简单表格：

    class App extends React.Component {
    state = {
        company:'',
        person:'',
    };

    handleChange = (event) => {
        const target = event.target;
        const fieldName = target.name;
        const value = target.value;

        this.setState({
            [fieldName]: value,
        });
    };


    handleSubmit = async () => {
        let date = new Date();

        const headers = {
            'Content-Type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
        };

        let submission = {
            method: "POST",
            headers: headers,
            body: {
                created: date,
                employee: {
                    company: this.state.company,
                    person: this.state.person,
                },
            }
        }

        let submitRequest = await fetch ('/src/php/requests.php', submission)
        <I tried using localhost/src/php to src/php to php/ to no effect
        console.log("Submit response: ",submitRequest)

    };

    render() {
        return (
            <div ><form><div>
                        <span style={{width: '150px'}}>
                            Company
                                <input
                                    name="company"
                                    type="text"
                                    onChange={this.handleChange}
                                />
                        </span></div>
                    <div><span style={{width: '150px'}}>
                            Name
                                <input
                                    name="person"
                                    type="text"
                                    onChange={this.handleChange}
                                />
                        </span> </div>
                    <button onClick={this.handleSubmit}> Submit </button>
                </form>
            </div>
        );
    }

}

export default App;

该应用程序旨在引用数据并将数据发送到本地托管的请求。php（下）

try {
$db = pg_connect("$host $port $dbname $login");
} catch(Exception $e) {
    print "Exception: " . $e->getMessage();
}
if(!$db){
    exit(pg_last_error() . "\n");
}
print "DB successful login \n";

$company = $person = $date = '';
$companyErr = $personErr = $dateErr = '';
$finalSubmission = '';

if ($_POST){
    appendLog($_POST); <simple logger to write post to file when received>
    return($_POST);
}

我知道 PHP 方面的一切都在工作，但是在 React 和 PHP 之间卡住了一些东西，因为我得到了错误

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

我究竟做错了什么？ 所有的变化是地址栏用?company=<name>&person=<name>刷新

Answer 1

所以问题是多方面的。 问题 1) 行为不稳定，导致所有初始问题。 删除表单修复了在地址栏中插入内容的网页，现在还允许通过 CORS 向 go 请求。 这是过去 2 天让我陷入困境的主要问题，让我陷入了困境。 只需将其保存到 state 就可以创造奇迹。

问题 2) 我最初提交的内容中缺少一些内容，已添加并重新格式化。 如果需要，您可以将其与上面的先前版本进行比较。

    const headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
    };

    let requestBody = {
        created: date,
        employee: {
            company: this.state.company,
            person: this.state.person
        }
    };

    let submission = {
        method: "POST",
        headers: headers,
        mode: 'cors',
        body:  JSON.stringify(requestBody),
        cache: 'no-cache',
        referrerPolicy: 'no-referrer',
    }

问题 3) CORS 需要在 PHP 端的标头中使用正确的参数。 通过添加以下代码已解决此问题。 它的关键也是，它必须是 php 文件顶部的第一件事（如下所述）

<?php
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: *');
    http_response_code(200);
    return;
}

header('Access-Control-Allow-Origin: *');
header('COntent-Type: application/json');

...rest of PHP, include, and functions.

这解决了我在系统上访问 php 文件的问题。 我最终使用"http://localhost:80/<website>/src/php/requests.php"来访问它。

希望这可以帮助将来遇到类似问题的任何人。 这绝对是一个令人困惑的问题，因为我不知道以这种方式与 react 交互。