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;

该应用程序旨在引用数据并将数据发送到本地托管的requests.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请求通过。这是过去两天困扰我的主要问题，让我陷入了困境。仅仅是拥有一个保存到国家的奇迹。

问题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(在PHP方面，CORS需要在头文件中使用适当的参数。这是通过添加下面的代码修复的。它的关键也是，它必须是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互动。