Error encountered with the `this.withCredentials` property within Cross Origin Resource Sharing

We have developed an AngularJS application that interacts with a RESTful web service hosted on a separate domain. Our CORS script works smoothly on Chrome and Firefox, but we are encountering issues with IE9 and Safari during authentication. It appears that the problem lies with the withCredentials attribute in these browsers. Are there any alternative methods for enabling CORS in IE and Safari?

<script type="text/javascript">
     XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
     XMLHttpRequest.prototype.send = function(vData) {
        this.withCredentials = true;
        this.realSend.apply(this, arguments);
     };
</script>
javascriptangularjscors

Answer №1

After exploring various scenarios, we have compiled the following summary which we hope will be helpful.

  1. IE10+ and Safari 4+ versions adhere to browser specifications by supporting XHR and withCredentials attribute for CORS functionality.
  2. This method works seamlessly without any issues as demonstrated in the provided script.
  3. For older IE versions (9-), XDR must be utilized for CORS.
  4. Despite attempts, URL rewrite mod did not work effectively on the server side when dealing with HTTPS.

The solution was rather straightforward. By default, IE and Safari disable third-party cookies. Since our system involves two distinct domains, the browsers were unable to store the necessary cookie after user login, resulting in unauthorized requests thereafter.

Here are the steps to enable third-party cookies:

  • In IE 10: Navigate to Internet Options > Privacy > Advanced > Third Party Cookies > Accept
  • In Safari: Go to Preferences > Privacy > Block Cookies > Never

To address this issue, we discovered that AngularJS version 1.1.1+ simplified the process by allowing the setting of ‘withCredentials’ value in the ‘config’ module ( $httpProvider.defaults.withCredentials = true;)

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

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

javascripthtmlbootstrap-5sidebar

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

I am working on an application that generates todo lists for tasks. These lists can be edited and deleted. I am trying to implement a dropdown menu in each list to provide options for updating or deleting the list individually. However, when I click on the ...

javascriptvue.js

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

javascriptjqueryhtmlforms

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

javascriptreactjstypescript

Link Tag and the Download Functionality in HTML

I'm looking for a way to deactivate the "download" attribute in an anchor tag, like download="false": <a href="https://cdn1.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png" download></a> In my AngularJS application, I want all image fi ...

jsonhtmlangularjs

Possible Inconsistencies with the LookAt Feature in Three.js

Attempting to use the lookAt function to make zombies move towards the character has been a challenge. The problem lies in the fact that they are not turning correctly but at odd angles. Here is the code snippet I tried: var pos = new THREE.Vector3(self ...

javascriptthree.js

Why is there a discrepancy in the time between the client and server?

I am working on a small script to test the delay for a post request locally and online. After comparing both dates, I noticed that the time difference was quite unusual. The client side time appears to be slightly ahead of what it should be. //server// a ...

javascriptnode.jsajax

What is the process for transferring an image from a cloud function request to the vision API?

Just set up a Google Cloud Function with an HTTP endpoint. I want to pass an image to this endpoint and have it sent all the way to the Vision API (which is already set up) and then receive the response back. So, in essence: image in POST request -> C ...

javascriptnode.jsgoogle-cloud-platform

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Trying to implement affiliate functionality on my eCommerce platform. The idea is that users who generate links will receive a commission if someone makes a purchase through those links. However, the challenge I'm facing is that I can't store the ...

javascriptnode.jsreactjstypescriptexpress

AngularJS failing to trigger Web API Route configuration with multiple parameters

Hello, I am facing an issue with my WebApiConfig, API Controller, and Angular Service. The 1st route is working perfectly fine, but the 2nd and 3rd routes are not being called by AngularJS even though the web API route seems to be correct. --WebApiConfig ...

c#asp.netangularjsasp.net-web-apiasp.net-web-api-routing

Using AngularJS to incorporate the render directive in an HTML string

My goal is to render a directive and have it displayed correctly in HTML using AngularJS. I have implemented a service that handles displaying warning messages to users. I am able to call this service per controller and specify the message to be shown. One ...

angularjsionic-framework

The val() function in jQuery returns an empty string when used with a bootstrap popover input field

I'm facing an issue with my bootstrap popup form that includes input fields and a submit button. The problem arises when I try to capture the current value of the input fields using jQuery's val() method after clicking the submit button - it retu ...

javascriptjqueryhtmltwitter-bootstrap

Utilize a fusion of various subjects and observables

I have the below code snippet: readonly todos$: Observable<Todo[]> = combineLatest([this.account$, this.loadTodoPage$]).pipe( concatMap(([account, pageNo]) => this.todoService.getTodos(account.id, pageNo)), scan((acc: Todo[], curr: Todo[ ...

javascriptangularrxjs

Transition effects applied to images with transparency using CSS

My collection includes three transparent PNG images: https://i.sstatic.net/80Jxj.png https://i.sstatic.net/Eewcq.png https://i.sstatic.net/VXk7A.png I have arranged them using the following HTML/CSS: <div style="position: relative; left: 0; top: 0; ...

javascriptjqueryhtmlcss

Find all objects in an array of objects that contain at least one value that matches a given string

I am currently integrating search functionality in my application. The UI search results are generated from an array of objects. My goal is to loop through the name, custNumber, and sneak values in each object and display only the ones that contain a subst ...

javascriptarrayssortingvue.jsfiltering

What is the best way to add a vanilla JavaScript keyup event listener to an Angular md-autocomplete input by utilizing the DOM id?

I am working with an angular md-autocomplete setup that looks like this: <md-autocomplete md-input-id="myid" ...> </md-autocomplete> My goal is to add an event listener like this: document.getElementById("myid") .addEventListener ...

javascriptangularjsinitkeyupmd-autocomplete

Exploring the world with HTML5 Geolocation on Google Maps

I've recently been studying a tutorial on HTML5 geolocation and I'm looking to make some modifications to the code. Specifically, I want to add a text input for the destination address instead of having a fixed destination. Any suggestions or met ...

javascripthtmlgoogle-mapsgeolocation

Determining Byte Location Within Upload Loop

Currently, I am in the process of developing a function that is responsible for sending data to a server in small chunks using a 3rd party API. With some assistance from the Stack Overflow community, I have managed to achieve this task successfully. The is ...

javascriptjqueryajaxfilereaderarraybuffer

Hiding labels using JQuery cannot be concealed

Why isn't this working? -_- The alert is showing, but nothing else happens. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent"> <script type="text/javascript"> if (navigator.userA ...

javascriptjqueryasp.net

Which target should be specified for pressing Enter in a Javascript Alert using Selenium IDE?

Seeking assistance with creating simple test cases using Selenium IDE. Encountering difficulties when recording test cases involving Javascript alerts, as Selenium does not support these pop-ups. Attempted a workaround by simulating the Enter key press wh ...

javajavascripthtmlseleniumselenium-ide