JavaScript MISBEHAVING - > CROSS ORIGIN RESOURCE EXCEPTION

Question

After long research and debugging i realized java-script was not the problem, I was rather having a cross origin resource exception which was thrown because some how the ajax request could not read my server script or rather did not have permission to access my server script. So i tried the following codes below but still the same issue, I placed the issue in red block blow, my java script is also below and my server script

$('#send').on('click', function(e) {
  var name = $('#name').val();
  var email = $('#email').val();
  var message = $('#message').val();
  alert("sending " + name + email + message);// this part is now working fine
  $.ajax({
    type: "POST",
    url: "https://xxxxxx/xxxxx/php/contact/maincontact.php",
    data: {
      nme: name,
      ema: email,
      msg: message
    },
    dataType: 'json',
    timeout: 10000,
    async: true,
    cache: true,// I removed the header which used to here before
    error: function(jqXHR, textStatus, errorThrown) {
      alert("error : " + errorThrown + " text :" + textStatus + " j :" + jqXHR.status);
      alert(jqXHR.responseText);
    },
    success: Succeeded
  });

});


function Succeeded(result) {
  alert("Successing");
  var data = JSON.parse(result[0]);
  try {
    $('#name').val(" ");
    $('#email').val(" ");
    $('#message').val(" ");
    if (data == true) {
      alert("We will Contact you shortly");
    } else {
      alert("OOpps! something went wrong");
    }

  } catch (e) {
    alert("You may not enter " + e);
  }
}

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxxx/xxxxxx/php/contact/maincontact.php. (Reason: missing token 'access-control-allow-origin' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

<!-- php codes -->
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
require_once('contact.php');

if(!empty($_POST)){

    $addcase = new contact();
    $data['vlu'] = $addcase->add($_POST['nme'], $_POST['ema'],     $_POST['msg']);
    echo json_encode($data);

}else{
   echo "Not properly parsed";
}


?>

Answer 1

The error message says:

missing token 'access-control-allow-origin' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel

So when you make the request you are trying to put access-control-allow-origin in the headers. (The message means that browser is asking the server if it is allowed to send that header in cross-origin Ajax and the server isn't saying that it is OK to do that).

This doesn't make any sense. Access-Control-Allow-Origin is a response header. There is no reason to put it on the request.

Now, the code you've provided doesn't try to set that header. This suggests that elsewhere in your code you are trying to set it universally (probably via ajaxsetup).

You need to find the point where you try to set it and remove that code.