React JS fetch 作为 POST 跨域，PHP 返回 200 但没有正文响应

Question

我知道有人问过类似的问题，但这里没有任何工作。提前谢谢！

我也在使用来自 react JavaScript 应用程序（位于 http://localhost:3000）的 fetch 来发布数据，并从本地 PHP API（使用 XAMPP 并位于 http://local.api.mysite.com/user）获取响应

每次我获得 200 状态时，没有任何返回的标题或正文。如果我在浏览器中转到 PHP URL，它就可以正常工作

我已确保在 js 和 php 中都设置了 cors，设置了内容类型，关闭了缓存，并尝试了此处和 Google 上的所有建议修复。

这是最后的手段

JS：

fetch('http://local.api.mysite.com/user', {
    method: 'POST',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache'
    },
    body: JSON.stringify(data),
    }).then(console.log(response))

PHP：

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header("Cache-Control: no-cache");
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    exit(0);
}
$output = json_encode(['status' => 'recieved']);
header('Content-Length: '.strlen($output));
header('Content-Type: application/json');
echo $output;
exit;

以前我将我的 PHP 标头限制得更严格，但我发现了这个代码块并使用它来让任何东西都通过测试。

解决方案 Rikin 对他的回答的评论让我打开了开发工具，转到网络选项卡，然后直接查看回复。这表明发生了服务器错误并导致空响应，状态为 200

Answer 1

这是fetch 关于其构建方式的问题。您会得到一个流 响应，您必须将其解析为json 或text 或blob，然后寻找我们期望的实际响应。我在下面修改了一些代码，以便为您提供所需的内容。

fetch('http://local.api.mysite.com/user', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    'Cache-Control': 'no-cache'
  },
  body: JSON.stringify(data),
})
.then(data => data.ok && data.json())
.then(response => console.log(response));

这是您在 fetch 响应中返回的内容：https://developer.mozilla.org/en-US/docs/Web/API/Response