Getting 409 error when calling php from my React application

Question

I am trying to call a simple php file from my React application which will send an email with the details from a contact form. For some reason when the React code executes the fetch of the PHP file, it returns a 409. However, if I manually post the URL into another tab it works as expected, and subsequent calls from my React application then work as expected!

This is my React code:

var url = '/backend/sendmail.php?subject=New Website Enquiry&[email protected]&msg=' + msg
      console.log(url)
      console.log('sending')

      fetch(url,
        {
          'headers': {
            'Accept': 'text/html',
            'Content-Type': 'text/html'
          },
          'method': 'GET',
        })
        .then(
          (result) => {
            console.log(result.status)
            if (result.status === 200) {
              console.log('success')
              this.togglePop();
              this.setState({
                name: "",
                email: "",
                phone: "",
                message: "",
                terms: false,
              })
            } else {
              console.log('failed')
              this.setState({ openError: true })
            }
          },
          (error) => {
            console.log('ERROR')
            console.log(error)
            this.setState({ openError: true })
          }
        )

And this is my PHP file:

<?php
//header("Access-Control-Allow-Origin: *");
header('Content-Type: text/html');

// error handler function
function customError($errno, $errstr) {
    error_log($errstr);
    http_response_code(500);
}

// set error handler
set_error_handler("customError");
http_response_code(200);

// send email
mail($_GET["to"],$_GET["subject"],$_GET["msg"],"From: [email protected]","-f [email protected]");
error_log($_GET["subject"].":\n".$_GET["msg"], 0);

echo 'OK';
?>

I have spent several days trying to figure out why this is happening. My htaccess file seems OK as once I have made one succesful call to the PHP file it works after that!

It's not a CORS issue as the file is on the same domain.

Anyone got any ideas?

Answer 1

You are sending the wrong request to the server, and that's why you get a 409 error. You should encode the URL params before sending a request

const url = '/backend/sendmail.php?subject=New Website Enquiry&[email protected]&msg=' + msg;
const encoded = encodeURI(url);
console.log(encoded)
// expected correct URI: "/backend/sendmail.php?subject=New%20Website%20Enquiry&[email protected]&msg="

You can read more about it here