SecuringWebApiUsingApiKey
SecuringWebApiUsingApiKey copied to clipboard
aram87
Call Api from javascript
Is it possible to call WeatherForecast Api by javascript from Ajax ? how is the token used ?
I try this, but seem not run..
$.ajax({ type: 'GET', url: "http://localhost:4321/WeatherForecast", contentType: "application/json; charset=utf-8", dataType: "JSON", beforeSend: function (xhr) { xhr.setRequestHeader('ApiKey', 'hL4bA4nB4yI0vI0fC8fH7eT6'); }, success: function (result) { alert(JSON.stringify(result));
},
error: function (xhr, status, error) {
alert(error);
}
});
Hello,
Definitely, you can call the API using JavaScript.
Since you are using $.ajax, then are you sure jQuery is properly referenced in your page? Also did you try to test the API separately? Like through postman? did it work fine?
Your code looks fine to me but am not sure what is happening wrong.
If you are using jQuery version 1.5+, you can instead use the 'headers' property, like the below:
$.ajax({ type: 'GET', url: "http://localhost:4321/WeatherForecast", contentType: "application/json; charset=utf-8", dataType: "JSON", headers: { 'ApiKey': 'hL4bA4nB4yI0vI0fC8fH7eT6' }, success: function (result) { alert(JSON.stringify(result)); }, error: function (xhr, status, error) { alert(error); } });
Try this out and let me know if it works. If it didn't work, please share what error are you getting?
Regards,
no, it doesn't work! i tried with postman and it works fine, on ApiKeyMiddleware.cs I can debug Headers.Keys, and is apiKey is found
_>? context.Request.Headers.Keys {string[9]} [0]: "Accept" [1]: "Accept-Encoding" [2]: "Cache-Control" [3]: "Connection" [4]: "Cookie" [5]: "Host" [6]: "User-Agent" [7]: "ApiKey" [8]: "Postman-Token"
_
I call from my .html page... apikey is not found
_>? context.Request.Headers.Keys {string[12]} [0]: "Accept" [1]: "Accept-Encoding" [2]: "Accept-Language" [3]: "Connection" [4]: "Host" [5]: "User-Agent" [6]: "Access-Control-Request-Method" [7]: "Access-Control-Request-Headers" [8]: "Origin" [9]: "Sec-Fetch-Dest" [10]: "Sec-Fetch-Mode" [11]: "Sec-Fetch-Site"
_
This is my html source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="aspNetHidden">
</div>
<div id="maindiv">
<button id="btnSend" type="button">TEST</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSend").click( function()
{
SendSpedizione();
}
);
});
function SendSpedizione() {
$.ajax({
type: 'GET',
url: "http://localhost:4321/WeatherForecast",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
headers: {
'ApiKey': 'hL4bA4nB4yI0vI0fC8fH7eT6'
},
success: function (result) {
alert(JSON.stringify(result));
},
error: function (xhr, status, error) {
alert(error);
}
});
}
</script>
</body>
</html>