Issue with Access Denied Error in Internet Explorer 11 when Using AngularJS

Every software development process consists of two essential components. FIRST, the hard work of developing the application. SECOND, the even harder task of making it compatible with the notorious Internet Explorer.

Currently, we have an AngularJS (v1.3.13) application that was developed in Webstorm without any server-side code. The application functions perfectly on Chrome and Firefox with no console errors. However, upon attempting to open the page on IE11 or IE9 (IE10 remains untested), the page fails to load. The console indicates two errors, one of which is an Access is Denied message on 

xhr.open(method, url, true);

within angular.js.

I have scoured various online forums for solutions, but none seem to be effective. Here is what I have attempted so far:

  1. Hosting the app on IIS and modifying Handler Mappings to facilitate Cross-Domain requests on an Application pool of .Net v4.0 (suggested by a colleague).
  2. Disabling cache for HTTP requests.
  3. Adding the domain to the trusted site category and including localhost/IP in the local intranet.
  4. Switching request type to JSONP and trying to include Access-Control-Allow-Origin headers (with a value of *).
  5. Adjusting IE settings to permit Cross-Domain requests.

The error persists despite our best efforts. Even my colleagues encountered similar challenges when testing on their machines. If anyone has suggestions or advice, please share them with me.

It appears that the issue could be related to CORS, potentially requiring the implementation of XDomainRequest (XDR). However, as the error is within angular.js, I am uncertain about how to proceed. I am not an expert in this area, so any assistance would be greatly appreciated.

Error message screenshot:

Additionally, IE displays another error: 

[$injector:nomod] Module 'ngLocale' is not available! 
You either misspelled the module name or forgot to load it. 
If registering a module ensure that you specify the dependencies 
as the second argument.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=ngLocale
, which I am currently overlooking.

If you have any insights or recommendations regarding this issue, please do not hesitate to share them. Thank you.

javascriptangularjsinternet-explorerxmlhttprequestcors

Answer №1

After upgrading from version 1.3.4 to 1.4.8, the issue with Angular Access Denied in I.E. (Microsoft Edge 25 2015) was resolved. It's strange that a simple upgrade fixed the problem.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route.js/1.4.8/angular.min.js"></script>

Answer №2

If you encounter the Access Denied error in AngularJS while using IE11, there is a helpful solution available here. I faced a similar issue when trying to download an image in IE11, but after adding the following line of code, it resolved the problem.

window.navigator.msSaveBlob(blob, paramDataObject.fileName); 
or
window.navigator.msSaveOrOpenBlob(blob, paramDataObject.fileName);

Answer №4

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
   window.navigator.msSaveOrOpenBlob(blob);
}
else {
   var urlObject = URL.createObjectURL(blob);
   window.open(urlObject);
}

Issue with setting window.location or window.open in AngularJS resulting in "access is denied" error on IE 11

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

The functionality of uploading files in Dropzone.js is not supported on Windows operating systems

I am currently working on a file uploader using dropzone functionality. I will share the code with you shortly, but first let me outline the problem: My setup consists of an Ubuntu machine running the server code in node.js using the multer library. The f ...

javascriptnode.jsubuntufile-uploaddropzone.js

Issue with formik onchange event not filling data in Material UI TEXTFIELD component

Greetings! I am currently working on a React project where I am managing the authentication process. I am using Material UI and Formik for validation and handling input changes. However, I encountered an issue with my onchange Formik handler in the TEXTF ...

javascriptreactjsapimaterial-uiformik

Utilize AngularJS to securely retrieve a zip file through a Spring-powered RESTful web service

AngularJs is still unfamiliar territory for me, and I'm looking to develop code that can download a zip file through a Spring-based RESTful web service upon clicking a 'download' button. The web service functionality is all set up, but I nee ...

angularjsspringjava

AngularJS - How to loop through a div to display all items

I am working with AngularJS to create a repeatable shopping cart items feature. Below is a sample JSON data structure: [{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price ...

htmlangularjs

Managing multiple checkboxes in a Vue component

I have a checkbox component in Vue: <template> <div class="checkbox"> <input class="checkbox-input" name="input" type="checkbox" v-model="checkbox"> </div> </templ ...

javascriptvue.jscheckboxvuejs2

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Refreshing an iFrame in NextJS from a different component

I am working on a NextJS application that includes a specific page structure: Page: import Layout from "@/components/app/Layout"; import Sidebar from "@/components/app/Sidebar"; export default function SiteIndex() { return ( < ...

javascriptreactjsnext.js

Designing a sequential bar graph to visualize intricate data using AmCharts

I received the following response from the server in JSON format: [{ "data1": { "name": "Test1", "count": 0, "amount": 0, "amtData": [ 0,0,0,0 ], "cntData": [ 0,0,0,0 ], "color": "#FF0F00" }, "data2": { ...

javascriptjqueryamcharts

When I try to send data from my Node.js application to my MySQL database, the information does not

I am currently working on developing a registration and login page, where the user details are stored in a database for authentication during login. The registration button is meant to store user data in the database to complete the sign-up process. For t ...

javascriptmysqlnode.jsreactjsexpress

Moving from the end to the beginning with a jQuery slider transition

Instead of relying on external plugins, I built this slider from scratch: function customSlider(selector, interval, index) { var slider = this; this.ind = index; this.selector = selector; this.slides = []; this.activeSlide = 0; this.amount; ...

javascriptjqueryhtml

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

javascriptjqueryhtmlcss

Using TypeScript gives you the ability to specify the type of an object while destructuring it,

Currently in the process of refactoring a NodeJS application to TypeScript. I have been consistently using object destructuring and have also been creating aliases while object destructuring, as shown in the code block below. My question is, how can I sp ...

javascripttypescriptobjectaliasdestructuring

The state is well-defined within the "ComponentDidMount" function, however, it appears to be undefined in the

After extracting data from my "ComponentDidMount" function and loading it into my state, I verified the presence of the data by console logging the value successfully. However, when trying to access the state in the same manner within the return statement ...

javascriptreactjssharepoint

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

The ES6 approach: iterator.throw(err) is often explained as inserting an exception as if it happened at the yield statement within the generator. The challenge lies in the fact that the stack trace of this exception does not include any information about t ...

javascriptajaxecmascript-6generatoryield

Utilizing JSX within this.state results in it being displayed as plain text when rendered

Currently, I am dynamically rendering a list of elements and I need to insert other elements in front of them based on key-value pairs. I want to utilize <sup></sup> tags for these elements, but they are appearing as plain text rather than sup ...

javascriptreactjsjsx

``Are you experiencing trouble with form fields not being marked as dirty when submitting? This issue can be solved with React-H

Hey there, team! Our usual practice is to validate the input when a user touches it and display an error message. However, when the user clicks submit, all fields should be marked as dirty and any error messages should be visible. Unfortunately, this isn&a ...

javascriptreactjstypescriptnext.jsreact-hook-form

"Exploring the power of asynchronous programming with dynamic async await in

I am currently working on creating a versatile function that can dynamically call async functions. //passing the controller and functionName (string) function asyncAwaitCaller(controller, functionName) { let result = await controller[functionName]; } ...

javascriptnode.jsasync-await

Determine which scroll bar is currently in use

I'm running into an issue with multiple scrollbars on my page - they just don't seem to be functioning correctly: <div class="dates-container" v-for="id in ids"> <overlay-scrollbars :ref="`datesHeader` ...

javascriptvue.jsvuejs2scrollbar

I am experiencing an issue where localhost is not displaying the JSON output for the Router and controller that I have

Recently delving into the world of NodeJS, I find myself facing a roadblock. While attempting to manage requests, my localhost appears to be endlessly loading or throwing an error. Error: cannot GET/ I aim to showcase the JSON data on my local site. Wh ...

javascriptnode.jsexpressmodel-view-controllermiddleware

Top method for removing quotation marks from form input using jquery

Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...

javascriptjqueryhtml