Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Currently, I am developing an angular web application that needs to be compatible with IE10. One of the requirements is to make a cross-domain call to our enterprise salesforce server. When using Chrome (not officially supported but commonly used for development), the call fails due to Chrome sending an OPTIONS preflight request to the salesforce server, which does not support CORS.

Surprisingly, IE does not send a CORS preflight request, so I expected the call to work without any issues. However, I encountered an "Access is Denied" error deep within the angular code.

Upon further investigation, I found that the specific line in Angular (v1.2.21) causing the issue is:

xhr.open(method, url, true); (line 8544 in version 1.2.21).

After browsing through discussions on GitHub, Google Groups, and Stack Overflow, it seems that the problem lies in how IE handles cross-domain requests and which XHR object is being utilized to make the call.

Previous versions of Angular had addressed this issue by adding a function before the xhr.open() call to fetch the correct XMLHttpRequest object for the IE version in use:

var xhr = createXhr(method);

xhr.open(method, url, true);
forEach(headers, function(value, key) {
  if (isDefined(value)) {
      xhr.setRequestHeader(key, value);
  }
});

Theoretically, this approach should invoke the appropriate xhr object's .open() method. However, I still encounter an "Access is Denied" error at that line.

Suggestions from various sources recommend using XDomainRequest() instead of XMLHttpRequest for cross-domain calls in IE. Despite my skepticism, I manually edited the code in angular.js to utilize XDomainRequest() specifically for our salesforce call:

var xhr;
if (url.indexOf("salesforce.com") > -1) {
  xhr = new XDomainRequest();
}
else {
  xhr = createXhr(method);
}

xhr.open(method, url, true);
forEach(headers, function(value, key) {
  if (isDefined(value)) {
      xhr.setRequestHeader(key, value);
  }
});

However, now the line where xhr.setRequestHeader(key, value) is called fails. Does anyone have insights into what could be causing this issue? It seems unlikely that Angular lacks a solution for handling cross-domain calls in IE, so I must be overlooking something.

Answer №1

Although the issue mentioned is related to IE10, I encountered the same problem with IE8-9 as well. My workaround involved utilizing the cross domain object window.XDomainRequest.

function loadCaptions() {

    //Utilizing XDomainRequest for compatibility with IE8-10, or else angular xhr requests may result in "access denied" error.
    var url = $scope.captionsUrl;
    if (!!window.XDomainRequest) {
        var xdr = new window.XDomainRequest();
        if (xdr) {
            xdr.open("get", url);
            xdr.send();
        }

        return;
    }


//This section is not relevant for stackoverflow users, included only to demonstrate my caption request method leading to "access denied"
    $http.get($scope.captionsUrl)
        .success(function (captionsJson) {
            $scope.captionsList = captionsJson;
            createCaptionsMap();
        })
        .error(function (data, status, headers, config) {
            $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
        });
}

EDIT:

Here's a more comprehensive solution incorporating memory management for a bug in XDR requests and callbacks for "on success"/"on error":

function loadCaptions() {
    //Using XDomainRequest for IE8-9 to prevent "access denied" error from angular get request.
    var url = $scope.captionsUrl;

    if (!!window.XDomainRequest) {
        var xdr = new window.XDomainRequest();

       var removeXDR = function(xdr) {

            var index = global.pendingXDR.indexOf(xdr);
            if (index >= 0) {
                global.pendingXDR.splice(index, 1);
            }
        };

        if (xdr) {
            xdr.onload = function(){
                removeXDR(xdr);
                $scope.captionsList = xdr.responseText;
                createCaptionsMap();
            };
            xdr.onerror = function(){
                removeXDR(xdr);
                $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
            };
            xdr.open("get", url);
            xdr.send();

            global.pendingXDR = [];
            global.pendingXDR.push(xdr);

        }

        return;
    }


//This part can be disregarded by stackoverflow users, just showing how I made caption requests resulting in "access denied"
    $http.get($scope.captionsUrl)
        .success(function (captionsJson) {
            $scope.captionsList = captionsJson;
            createCaptionsMap();
        })
        .error(function (data, status, headers, config) {
            $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
        });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate the MUI theme color into inline styles?

Imagine I have the following tabs displayed below. Is there a way to implement MUI's primary and secondary colors for inline CSS? My goal is to personalize the colors using my own palette. <Tabs value={value} ...

What is the best way to load the route calculation dynamically?

I am struggling with calculating the Google Maps route dynamically. The console shows an error stating that 'calcularRuta' is not defined: Uncaught ReferenceError: calcularRuta is not defined at HTMLInputElement.onclick (index.html:1) Despi ...

Tips on capturing JSON data for export and sending it to a specific URL

After implementing the recommended code changes, I still cannot see any updates on the specified WordPress page - . It appears that there may be a login information or other issue preventing me from viewing the changes. Here is the updated code: // New ...

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

Problem I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is: TypeError: $options.language.includes is not a function The technologies I am using are Vue, Vuex, and ...

Finding the correlation between SVG element IDs and JSON keysUnderstanding how to pair up

Currently, I have an SVG file that can be viewed here. My goal is to present specific data when elements within the SVG are clicked. The data is in JSON format and I am looking to match each ID of an SVG element with a key in the JSON data. If both the key ...

What is the best way to export a React Material-UI component with two separate styles objects in Material-UI V1?

We are currently utilizing material-ui version 1 and composing Higher Order Components (HOC) with the recompose utility. Our issue arises from having two separate styles objects - one defined within the component itself, and another general style object th ...

Obtain the value or values of radio buttons based on certain conditions

Recently, I have been delving into .JS and grappling with pre-existing code. One of the challenges I face involves extracting data from radio buttons after a particular selection is made. The gist of it is related to transportation requirements. Upon indi ...

Transmit JSON information to PHP and leverage it for interactions with MySQL database

I am trying to copy all selected rows from the FIRST table and insert them into the SECOND table. In JSON, I am sending the event type (insert or delete) and an array of IDs for the rows to copy. How can I access this JSON data in a PHP file? JS: var da ...

How to Set Up AJAX.NET 2.0 Extension in a .NET 3.5 Framework

Is it necessary for me to also install AJAX.NET 2.0 Extension, Futures, Samples, and Source Code even though I have already installed .NET Framework 3.5 SP1? I am currently using Server 2003 and have installed dotnet2.0. Recently, I also installed Visual ...

What is the most efficient way to transfer form data from one JSP page to another?

I need to transfer information from one webpage (1.jsp) to another webpage (2.jsp). The data that needs to be transferred includes checkboxes, radio buttons, and drop downs. This data will be used in 2.jsp to generate the appropriate page. Is there a way ...

What is the correct location for me to store a text file so that AJAX can access it successfully?

After diving into a textbook to learn AJAX, I encountered an introductory exercise that required running some code. However, on line 16, there seems to be an issue with a GET request to retrieve a .txt file. Where exactly should I place the text file - i ...

JQuery fails to retrieve accurate width measurements

Utilizing this code snippet, I have been able to obtain the width of an element and then set it as its height: $(document).ready(function(){ $(".equal-height").each(function(){ var itemSize = $(this).outerWidth(); cons ...

Encountering issues when attempting to install vue-cli on a new project

After creating an empty project, I attempted to install vue-cli using the command npm install -g @vue/cli. However, during the installation process, I encountered the following errors and warnings from the interpreter: npm WARN read-shrinkwrap This versi ...

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

AngularJS view is not refreshing

I am facing an issue with updating a view via a controller that fetches data from a service. Despite changing the data in the service, the view does not reflect these updates. I have created a simplified example from my application, which can be found here ...

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

I need help customizing my Forms Date Input to only allow selection of Thursdays, Fridays, and Saturdays. I've searched for a solution but haven't been successful so far. Is there any JavaScript or HTML code that can help me achieve this? Below ...

Utilize a standard JavaScript function from a separate document within a function of a React component

I am facing an issue where I need to incorporate a standard JavaScript function within a React component function. The script tags are arranged in the footer in the following order: <script src="NORMAL JAVASCRIPT STUFF"></script> // function ...

Accessing index.html via file:// from Vue-cli template

Whenever I execute the npm run build command using this Vue-cli template, it displays this message: Hint: The built files are designed to be served over an HTTP server. Attempting to open index.html via file:// will not function correctly. Therefore, the ...

What is the process for transferring information from a Microsoft Teams personal tab to a Microsoft Teams bot?

Is it feasible to share data such as strings or JSON objects from custom tab browsers to a Teams bot's conversation without utilizing the Graph API by leveraging any SDK functionality? ...

Gatsby's own domain and absolute links: the perfect pair

My goal is to establish a direct link to files (such as images and downloads) in my static directory. During development, the link should be http://localhost/myimage.jpg, and once deployed, it needs to switch to https://www.example.com/myimage.jpg. Is the ...