使用JavaScript Fetch API发送POST请求，后端无法接收数据

核心原因 #

你前端发送的是JSON格式的请求体（Content-Type: application/json），但PHP默认的$_POST超全局变量只解析application/x-www-form-urlencoded或multipart/form-data类型的请求数据，所以直接用$_POST['email']拿不到值。另外前端代码里header拼写错误，应该是复数headers，这也会导致请求头不生效。

解决方案（二选一即可） #

方案1：修改前端，发送表单编码数据 #

调整请求头和数据格式，让后端能通过$_POST直接读取参数：

const corpo = {
    email: 'vila07@hotmail.com',
    password:'123',
}   
let url = "http://localhost/beauty/src/backend/login.php";
const options ={
    method: 'POST',
    mode: 'cors',
    headers:{
        'Content-Type':'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams(corpo).toString(),
}

fetch(url,options)
.then((r)=>r.json())
.then((r)=>{
console.log(r);
});

方案2：修改后端，解析JSON请求体 #

保持前端代码不变，后端读取原始请求体解析JSON数据：

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) { 
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); 
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    exit; // OPTIONS请求无需返回后续内容，直接终止
}

// 读取并解析JSON格式的请求体
$rawBody = file_get_contents('php://input');
$postData = json_decode($rawBody, true);

$array = array();
if(isset($postData['email']) && isset($postData['password'])){ // 确保两个参数都存在
    $array = array(
        'email'=>'aa',
        'password'=>'bb'
    );
    echo json_encode($array);
}
else
{
    $array = array(
        'email'=>'No post found',
        'password'=>'No post found'
    );
    echo json_encode($array);   
}
?>

内容的提问来源于stack exchange，提问作者Vi almeida