React JS POST 请求不起作用（404）但 GET 请求有效

Question

我有一个非常奇怪的问题，当我 POST 到我的 PHP 文件时，它返回一个 404 状态码，而当我执行 GET 请求时，它给我一个状态码 200。 我用 XMLHttpRequest、Fetch、Axios 和 jquery 尝试了我的请求，但都给出了相同的响应。 我做错了什么？

这些是我的 ajax 请求。

const body = { firstName: 'Fred',lastName: 'Flintstone' };
const handleSubmit = async (e) => {
e.preventDefault()
fetch(`ajaxHandler.php`)
.then(res => 
console.log(res)
)
fetch('ajaxHandler.php', {
method: 'POST',
// mode: 'CORS',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
console.log(res);
}).catch(err => console.log(err));
}

来自控制台的 POST 请求响应。

login.js:20 POST http://localhost:3000/ajaxHandler.php 404 (Not Found)
handleSubmit @ login.js:20
onClick @ login.js:65
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:584
executeDispatchesInOrder @ react-dom.development.js:609
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5803
batchedEventUpdates$1 @ react-dom.development.js:24401
batchedEventUpdates @ react-dom.development.js:1415
dispatchEventForPluginEventSystem @ react-dom.development.js:5894
attemptToDispatchEvent @ react-dom.development.js:6010
dispatchEvent @ react-dom.development.js:5914
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
discreteUpdates$1 @ react-dom.development.js:24417
discreteUpdates @ react-dom.development.js:1438
dispatchDiscreteEvent @ react-dom.development.js:5881
login.js:28 Response {type: "basic", url: "http://localhost:3000/ajaxHandler.php", redirected: false, status: 404, ok: false, …}

从控制台获取响应

login.js:16 Response {type: "basic", url: "http://localhost:3000/ajaxHandler.php", redirected: false, status: 200, ok: true, …}

ajaxHandler (PHP) 代码

<?php
session_start();

header('Access-control-Allow-Methods: POST,GET,DELETE,OPTIONS');
header('Accept: application/json');

$response = array("success" => true, "message" => "yeahhh");

echo json_encode($response);

Answer 1

如果出现 404 错误，可能会发生很多事情，包括网络和其他问题，但我认为这里有一些建议。

我需要问的一个问题是：ReactJS 服务器和 PHP 服务器是否在同一个 web 域上？即，用户是否在 example.com 上看到了您的 ReactJS 代码，但您的 PHP 服务器在 example2.com 上？

如果服务器相同，那么，在您的 ReactJS 中，尝试定义 credentials 变量...

const fetchargs = {
    'method': method,
    'credentials': 'same-origin',
};

fetch('ajaxHandler.php', fetchargs...);

如果服务器不同，则将“凭据”更改为include。查看Fetch() MDN Documents 上的 fetch() API。

在您的 PHP 方面，我看到您省略了 Access-Control-Allow-Origin 标头。同样，如果您对前端/后端（ReactJS/PHP）使用相同的域，那么您需要将其设置为域名（如文档中所示）。如果域不同，您需要将其设置为*，如CORS MDN Documents 中所述。

<?php

     header('Access-Control-Allow-Origin: https://mozilla.org');

?>

希望这会有所帮助！ 404 可能很神秘，但我怀疑这正是您的服务器配置为在发送不允许的 POST 时响应的方式。