"POST [...] 403" error (email sending with AJAX/jQuery)

Question

I'm doing my resume on a website format, so I took a template on internet ( here ) and hosted it on bitbucket

However I can't establish the mail sending part, I get the "POST [...] 403" error like this in my browser console Here -> https://image.noelshack.com/fichiers/2019/13/2/1553620586-console-log.png

Here is the sendEmail.php :

<?php

// Replace this with your own email address
$siteOwnersEmail = 'test@gmail.com';


if($_POST) {

   $name = trim(stripslashes($_POST['contactName']));
   $email = trim(stripslashes($_POST['contactEmail']));
   $subject = trim(stripslashes($_POST['contactSubject']));
   $contact_message = trim(stripslashes($_POST['contactMessage']));

   // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
   // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }


   // Set Message
   $message .= "Email from: " . $name . "<br />";
    $message .= "Email address: " . $email . "<br />";
   $message .= "Message: <br />";
   $message .= $contact_message;
   $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

   // Set From: header
   $from =  $name . " <" . $email . ">";

   // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


   if (!$error) {

      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }

    } # end if - no validation error

    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;

        echo $response;

    } # end if - there was a validation error

}

?>

The contact form :

/*----------------------------------------------------*/
/*  contact form
------------------------------------------------------*/

   $('form#contactForm button.submit').click(function() {

      $('#image-loader').fadeIn();

      var contactName = $('#contactForm #contactName').val();
      var contactEmail = $('#contactForm #contactEmail').val();
      var contactSubject = $('#contactForm #contactSubject').val();
      var contactMessage = $('#contactForm #contactMessage').val();

      var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
               '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;

      $.ajax({

          type: "POST",
          url: "inc/sendEmail.php",
          data: data,
          success: function(msg) {

            // Message was sent
            if (msg == 'OK') {
               $('#image-loader').fadeOut();
               $('#message-warning').hide();
               $('#contactForm').fadeOut();
               $('#message-success').fadeIn();   
            }
            // There was an error
            else {
               $('#image-loader').fadeOut();
               $('#message-warning').html(msg);
                $('#message-warning').fadeIn();
            }

          }

      });
      return false;
   });

The HTML code :

<div class="row">
    <div class="eight columns">
        <!-- form -->
        <form action="" method="post" id="contactForm" name="contactForm">
            <fieldset>
                <div>
                    <label for="contactName">Name <span class="required">*</span></label>
                    <input type="text" value="" size="35" id="contactName" name="contactName">
                </div>
                <div>
                    <label for="contactEmail">Email <span class="required">*</span></label>
                    <input type="text" value="" size="35" id="contactEmail" name="contactEmail">
                </div>
                <div>
                    <label for="contactSubject">Subject</label>
                    <input type="text" value="" size="35" id="contactSubject" name="contactSubject">
                </div>
                <div>
                    <label for="contactMessage">Message <span class="required">*</span></label>
                    <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
                </div>
                <div>
                    <button class="submit">Submit</button>
                    <span id="image-loader">
                        <img alt="" src="images/loader.gif">
                     </span>
                </div>
            </fieldset>
        </form> <!-- Form End -->
        <!-- contact-warning -->
        <div id="message-warning"> Error boy</div>
        <!-- contact-success -->
        <div id="message-success">
            <i class="fas fa-check"></i>Your message was sent, thank you!<br>
        </div>
</div>

And the script part :

   <!-- Java Script
   ================================================== -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
 <script src="js/jquery-1.10.2.min.js"></script>
 <!-- <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> -->
   <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>

   <script src="js/jquery.flexslider.js"></script>
   <script src="js/waypoints.js"></script>
   <script src="js/jquery.fittext.js"></script>
   <script src="js/magnific-popup.js"></script>
   <script src="js/init.js"></script>

(I have tried the commented parts but still same error)

You can see the expected results on the demo here at the end of the page

Thanks for your help !

EDIT : Finally I changed and deployed my resume on Heroku. The problem was apparently coming from hosting it on Bitbucket

Answer 1

if you get a CORS error try adding " https://cors-anywhere.herokuapp.com/ " in front of your URL.

Here is an example in javascript/html

var CORS = "https://cors-anywhere.herokuapp.com/"


function loadDoc() {
var apiKey = getName();
var apiPw = getPass();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  myFunction(this);
}
};
 xhttp.open("GET", CORS + 
'https://brickset.com/api/v2.asmx/getThemes?' + 'Username=' + apiKey + 
, true);