I have an API that uses Basic Authentication (Username, Password). I am trying to use this in an esriRequest
to pull back the JSON
data object from the GET
request. To test this (and potentially avoid CORS issues), I am running this on my localhost (IIS). I have already set my IIS Default WebSite HTTP Response Headers
to Access-Control-Allow-Origin: '*'
. However, I am still getting the following error in my esriRequest
:
Access to XMLHttpRequest at 'https://ria.azurewebsites.net/api/ria/event?Username=myUsername&Password=myPassword' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This error gets thrown in both Chrome and Firefox.I even tried adding withCredentials: true
to my request, but it then throws an additional error:
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json.
At the top of my code, I have also added: esriConfig.defaults.io.corsEnabledServers.push("ria.azurewebsites.net");
, which has resolved this CORS issue for other APIs in my application, but not this one. I have tried several configurations, but my current code uses a precallback function
and .setRequestPreCallback()
method. As you can see in the commented out attributes, I've also tried to pass 'Username' and 'Password' as content too. I have tested the general GET
Request in Swagger UI
and it comes back just fine. Is there something I am missing here; something else I need to do in order for this to work?:
function floodCallbackFunction(ioArgs){
if (ioArgs.url.indexOf("https://ria.azurewebsites.net") > -1) {
ioArgs.headers.Username = "myUsername";
ioArgs.headers.Password = "myPassword"; // add custom headers
}
return ioArgs;
}
....
esriRequest.setRequestPreCallback(floodCallbackFunction);
var evnts;
var eventRequest = esriRequest({
withCredentials: true,
url: "https://ria.azurewebsites.net/api/ria/event",
content: {
// "Username": "myUsername",
// "Password": "myPassword"
},
dataType:"jsonp",
handleAs: "json"});
eventRequest.then(function(resp) {
evnts = resp;
console.log(evnts);
console.log("Success: ", evnts);
}, function(error) {
console.log("Error: ", error.message);
});