user1638279 user1638279 - 4 months ago 28
Ajax Question

issue while passing ajax header information

I am getting some issue while trying to run a client side javascript where I need to pass headers through ajax. While the same is working in php/curl , I am not getting why it is not working through ajax. After I a bit or search I found out how to pass headers in ajax. But still I am getting below issue.


Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login.
(Reason: missing token 'access-control-allow-headers' in CORS header
'Access-Control-Allow-Headers' from CORS preflight channel).


I have alredy seen some posts here with this issue, but I think if my php/curl code is working , then js /ajax should also work.
Below is the html single file which contains a button, on click of which, ajax call is there to post the information and get the response. I am sure there is some issue with the way I am passing the header information in ajax.

This is aws_login.html

<button onclick="login()">Login</button>
<div id="respData"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">
function login()
{
var postData = {"email": "mgftest1507_p3@gmail.com",
"password":"TVRJeg",
"social_login":"no",
"provider":"",
"provider_id":""
};
var strData = JSON.stringify(postData);
//alert(postData);
alert(strData);
$.ajax({
type: "POST",
dataType: "text",
beforeSend: function (request)
{
request.setRequestHeader("Access-Control-Allow-Origin", '*');
request.setRequestHeader("Access-Control-Allow-Methods", 'OPTIONS');
request.setRequestHeader("Access-Control-Allow-Headers", 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token');
request.setRequestHeader("Content-Type", 'application/json');
request.setRequestHeader("x-api-key", 'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA');
},
crossOrigin: true,
crossDomain: true,
url: "https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login",
headers: {
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'OPTIONS',
'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Content-Type':'application/jsonp',
'x-api-key':'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
},
data: strData,
success: function(response, textStatus, XMLHttpRequest) {
alert(response);
$('#respData').html(response);
}
});
}
</script>


I have already tried beforeSend and headers separately in the function. Both didnt work.
Below is php / curl code which runs absolutely fine.
This is aws_login_pc.php

<?php
$url = 'https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login';
$client = curl_init($url);
curl_setopt($client, CURLOPT_URL, $url);
curl_setopt($client, CURLOPT_RETURNTRANSFER, true);
curl_setopt($client, CURLOPT_HEADER, false);
curl_setopt($client, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($client, CURLOPT_HTTPHEADER,
array('Access-Control-Allow-Origin: *',
'Access-Control-Allow-Methods: OPTIONS',
'Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Content-Type: application/json',
'x-api-key: RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
));
$arr = array(
'email' => 'mgftest1507_p3@gmail.com',
'password' => 'TVRJeg',
'social_login' => 'no',
'provider' => '',
'provider_id' => ''
);
$array_val = json_encode($arr);
curl_setopt($client, CURLOPT_POST, true);
curl_setopt($client, CURLOPT_POSTFIELDS, $array_val);
$head = curl_getinfo($client);
$raw = curl_exec($client);
$result = json_decode($raw);
curl_close($client);

echo '<pre/>';
print_r($result);
echo '</pre>';
?>


Both are single independent files. So anyone can try by running in their local. The html file can be run without any server also. I think I need to find a way by which I can send all those curl parameters in ajax also.

Answer

Remove the Access-Control header and the beforeSend event

See the following:

 var postData = {
   "email": "mgftest1507_p3@gmail.com",
   "password": "TVRJeg",
   "social_login": "no",
   "provider": "",
   "provider_id": ""
 };
 var strData = JSON.stringify(postData);
 //alert(postData);
 alert(strData);
 $.ajax({
   type: "POST",
   dataType: "text",
   crossOrigin: true,
   crossDomain: true,
   url: "https://cej3j6och1.execute-api.us-east-1.amazonaws.com/staging/accounts/login",
   headers: {
     'Content-Type': 'application/jsonp',
     'x-api-key': 'RmnZWntaBy42ZHkL9KoHY90KTIXfQVNY5TJsSAoA',
   },
   data: strData,
   success: function(response, textStatus, XMLHttpRequest) {
     alert(response);
     $('#respData').html(response);
   }
 });

https://jsfiddle.net/tL5rh8ds/