Running ReactJS and PHP Together

Question

I'm trying to get a fetch call in React to talk to a PHP script I'm running on MAMP..

For some reason it's giving me errors.. I'm not sure where to go from here..

This is the code I'm using in React:

getPHP = () => {
    var formData = new FormData();
    formData.append('content', 'test2');
    fetch(`http://localhost:8888/phpBackend/demo.php`, {
      method: 'POST',
      headers: {
      },
      body: formData,
    }).then(res => res.json())
    .then(response => {
      console.log('response:');
      console.log(response);
    });
  }
  onSubmit = (e) => {
    e.preventDefault();
    this.getPHP();
}

And my PHP Script:

<?php
    $content = $_POST['content']
    $response = array("success" => true, "message" => $content);

    echo json_encode($response);
?>

I'm getting this error:

FileUploader.js:20 POST http://localhost:8888/phpBackend/demo.php 500 (Internal Server Error)
UserForm._this.getPHP @ FileUploader.js:20
UserForm._this.onSubmit @ FileUploader.js:44
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
FileUploader.js:25 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at FileUploader.js:25

Originally there was a cross domain issue (cors) but that was fixed with an .htaccess file I added:

<IfModule mod_rewrite.c>
    Header add Access-Control-Allow-Origin: "*"
    Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
    Header add Access-Control-Allow-Headers: "Content-Type"

    RewriteEngine on
    RewriteBase /
</IfModule>

Does anyone know why this is throwing errors?

Do you still get the error if you do e.g. `array("success" => true, "message" => true);` as a test? — Tholle, Aug 01 '18 at 22:08
View the request / response in Chrome developer tools (network). Inspect the headers and the payload. — eddiewould, Aug 01 '18 at 22:18
Does this mean anything to you guys? I'm still beginner level with this stuff.. It looks like the FormData was received? https://drive.google.com/file/d/1OZcBCEPKqxqT8okjQQMVfHX1P2JqisLH/view?usp=sharing — Cmaxster, Aug 01 '18 at 22:27
Quick question, are you able to post to the url via postman or something? I mean this url `http://localhost:8888/phpBackend/demo.php` — Aritra Chakraborty, Aug 01 '18 at 22:52
I'm not sure... I've never used postman before, and I'm not sure how it works.. — Cmaxster, Aug 01 '18 at 22:57
If you have a 500 server error, then look in the PHP logs for what that error is. Or "show Error" in PHP. https://stackoverflow.com/questions/5438060/showing-all-errors-and-warnings/5438125#5438125 Then go from there — Robbie, Aug 02 '18 at 02:57
P.S. It'll say `Parse error: syntax error, unexpected '$response' (T_VARIABLE) in demo.php on line 3` — Robbie, Aug 02 '18 at 03:02
Ok, I found it... "[02-Aug-2018 15:19:39 Europe/Berlin] PHP Parse error: syntax error, unexpected '$response' (T_VARIABLE) in /Applications/MAMP/htdocs/phpBackend/demo.php on line 3" — Cmaxster, Aug 02 '18 at 13:20
Guys! I got it working... It looks like PHP requires semicolons on each line.. I'm used to JavaScript where it's not as important. It seems to be working now! Thanks so much for all your help everyone! — Cmaxster, Aug 02 '18 at 13:23

score 1 · Answer 1 · answered Jul 28 '21 at 15:34

You have a typo in the php script on line 2. Your missing a semicolon on the end of the line.

<?php
$content = $_POST['content']; // there you missed the semicolon
$response = array("success" => true, "message" => $content);

echo json_encode($response);?>

Running ReactJS and PHP Together

1 Answers1