PHP not getting data sent by post from React in Development, whereas Postman works

Question

Given the following code:

fetch(mockproxy+myphp.php,{ 
        method: 'POST',
        headers:{'Token':token["token"]},
        body: name,
    }).then((response) => response.json())
      .then((json)=>{
        toast.success(JSON.stringify(json));
      }) 
      .catch((err) => {
        toast.error(JSON.stringify(err));
       })
  }

mockproxy is helping bypass CORSS. The file looks like this:

const corsAnywhere = require('cors-anywhere');
const express = require('express');
const apicache = require('apicache');
const expressHttpProxy = require('express-http-proxy');
const CORS_PROXY_PORT = 5000;
// Create CORS Anywhere server
corsAnywhere.createServer({}).listen(CORS_PROXY_PORT, () => {
  console.log(
    `Internal CORS Anywhere server started at port ${CORS_PROXY_PORT}`
  );
});
// Create express Cache server
let app = express();
// Register cache middleware for GET and OPTIONS verbs
app.get('/*', cacheMiddleware());
app.options('/*', cacheMiddleware());
// Proxy to CORS server when request misses cache
app.use(expressHttpProxy(`localhost:${CORS_PROXY_PORT}`));
const APP_PORT = process.env.PORT || 5080;
app.listen(APP_PORT, () => {
  console.log(`External CORS cache server started at port ${APP_PORT}`);
});
/**
 * Construct the caching middleware
 */
function cacheMiddleware() {
  const cacheOptions = {
    statusCodes: { include: [200] },
    defaultDuration: 60000,
    appendKey: (req, res) => req.method
  };
  let cacheMiddleware = apicache.options(cacheOptions).middleware();
  return cacheMiddleware;
}

And the server is a shared server where I upload the PHP files so they can access to the DB. The php receives the data and give a response when I use postman but not when I execute the fetch from the dev website, I'm using react, I think it doesn't matter in this case.

The PHP file:

<?php
$headers = apache_request_headers();

header("Access-Control-Allow-Origin: *, ");
header("Access-Control-Allow-Methods: HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];

if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
    header("HTTP/1.1 200 OK");
    exit;
}

if (isset($_POST["name"])) {
    echo json_encode(" name" . $_POST["name"]); //returned on postman
}else{
    echo json_encode("no name"); //returned on development.
}
exit;

Answer 1

So this is a code i use when i want to fetch all data from a form. You can obviously not loop through all forms like i do below but just your single form.

// Query all forms in the DOM or a specific one if you want
const forms = document.querySelectorAll('form');

// Loop through them
forms.forEach((form) => {
    // if method is post
    if (form.method === 'post') {
        form.addEventListener('submit', (event) => {
            // prevent default submit
            event.preventDefault();
            // prepare the data
            let data = new FormData(form);
            // fetch using the form's
            fetch(form.action, {
                method: 'post',
                body: data,
            })
            // get the text() from the Response object
            .then(response => response.text())
            .then(text => {
                // Display it in the result div
                document.getElementById('result').innerHTML = text;
            })
        }, false);
    // if not post (get really)
    } else {
        form.addEventListener('submit', (event) => {
            // prevent default submit
            event.preventDefault();
            // build the URL query params from the submitted data
            const data = new URLSearchParams(new FormData(form).entries());
            // Fetch, URL is formed from the action, append ? and then the query params
            fetch(form.action + '?' + data)
            // get the text() from the Response object
            .then(response => response.text())
            .then(text => {
                // Display it in the result div
                document.getElementById('result').innerHTML = text;
            })
        }, false);
    }
});