BeforeSend does not add authorization header to my jquery ajax call (main authorization)
I am trying to make a $ ajax () call to a rest service. I need to use basic authentication for this call, so I added a beforeSend handler to my ajax call. When I track this in Fiddler, I don't see it attaching an Authorization header to my request.
<body>
<div id="Button1" style="border: 2px solid blue; font-family: Cambria;">
Get CMS Content
</div>
<br />
<div id="error" style="color: Red; font-family: Cambria; font-size: large; display: none;">
</div>
<span style="font-family: Cambria; color: #009933; font-weight: bold">Result:</span>
<div id="result">
</div>
<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
$('#error').fadeOut('slow');
//var requestParams = { 'format': 'json', 'username': 'administrator', 'password': '' };
var requestParams = { 'format': 'json' };
$.ajax({
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic YWRtaW5pc3RyYXRvcjo=");
},
url: "http://localhost/KenticoCMS7/rest/cms.country",
data: requestParams,
dataType: "text",
contentType: "application/json;",
success: function (result) {
$('#error').fadeOut('slow');
$('#result').text(result);
},
error: function (xhr, status, errorThrown) {
$('#error').text(JSON.stringify(xhr));
$('#error').fadeIn('slow');
}
});
});
});
</script>
Suggestions around this will be very helpful. Also, can someone comment on why the script is tracking this request as type OPTIONS when it should be of type GET?
source to share
OPTIONS indicates that this is a CORS request that requires a PREFLIGHT request to determine if the server is allowed to the request method and if these permissions are allowed. By returning HTTP / 405, the server indicates that it does not support CORS, which will never send a subsequent GET request (including its credentials).
Are you submitting a cross-origin request?
source to share