0

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);
});
  • 1
    The problem resides in the server that you are trying to reach out: "ria.azurewebsites.net". You are setting your IIS to "Access-Control-Allow-Origin: '*'", but you are accessing an external server from your JS app. So your IIS setting won't be used. I would double check the CORS settings of the server and review its documentation. – Katah Jul 30 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.