Having trouble accessing cookies in JavaScript on Internet Explorer 11?

I am facing an issue with my Angular application where cookies are not being read properly in Internet Explorer 11. The JavaScript code works fine on Chrome, but IE seems to be having trouble accessing the cookie data even though it is visible in the developer tools and not set to HTTP only. I have already checked that all cookies are enabled on IE.

If anyone has any insights or suggestions on why IE is behaving this way with my app, I would greatly appreciate the help.

Below is how I set the cookie in my controller:

HttpResponseMessage response = new HttpResponseMessage();
JsonMediaTypeFormatter json = new JsonMediaTypeFormatter();
response.Content = new ObjectContent<PvUser>(MyPOCO, json, "application/json");
var cookie = new CookieHeaderValue(cookieName, cookieValue);
cookie.Domain = Request.RequestUri.Host;
cookie.Expires = DateTimeOffset.Now.AddMinutes(20);
cookie.HttpOnly = false;
response.Headers.AddCookies(new CookieHeaderValue[] { cookie });

And here is the code snippet from w3schools that I am using to retrieve a cookie by its name:

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1);
      if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}

Answer №1

Despite grappling with much pain and confusion, I have discovered that this perplexing issue can be resolved by using HttpResponse instead of HttpResponseMessage.

HttpResponse response =HttpContext.Current.Response;
response.Clear();
response.SetCookie(cookie);
response.StatusCode = 200;// HttpStatusCode.OK;
response.ContentType = "applicaiton/json; charset=utf-8";
response.Write(jsonSerializer.Serialize(loggedInUser));
response.End();

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

Ways to turn off emojis in froala editor

I successfully integrated the Froala editor and dynamically generated an ID for it based on specific requirements. Everything is working well, but I now need to disable emoticons in this editor. $('#froala'+key).froalaEditor({ imageUploadP ...

scrollable material ui chips list with navigation arrows

I'm attempting to create a unique scrollable chips array using Material UI version 4 (not version 5). Previous examples demonstrate similar functionality: View Demo Code I would like to update the scrolling bar of this component to include l ...

Javascript handling scrolling and repositioning

When using the scrollBy() method in the window object of JavaScript, there are two arguments required. But what do these arguments actually represent? The resource I am currently studying from states that it is "the number of pixels to scroll by," but I am ...

A guide on assigning a state variable to a dynamically generated component within a React application

I need to display user data from an array and have a button for each watchlist that deletes it. Although the backend is set up with a function deleteWatchlist, I am facing an issue in setting the state of the watchlistName for each watchlist after mapping ...

Tips for troubleshooting an Angular error when no specific information is provided

I'm encountering an error `ERROR Error: "[object Object]" in my console and my app is displaying a white screen. Everything was working perfectly fine before, and I can't pinpoint any changes that may have caused this issue. The error appears to ...

The length of the LinearProgress bar does not match the length of the navbar

Utilizing the LinearProgress component from Material UI, I created a customized ColoredLinearProgress to alter its color: import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import { LinearP ...

What steps can be taken to ensure that the onchange event functions properly with radio input

I am facing an issue with my input field as the value changes automatically when an option is selected. However, I want this functionality to also work the same way when a radio input option is selected. How can I modify the code to achieve this? func ...

Count Scroller - Finding a Solution for _.debounce

Issue with Counter I have a counter that should increase or decrease by one each time the user scrolls up or down. The problem I'm facing is that my counter $('html').on('mousewheel', function (e) { var delta = e.originalEve ...

Send a hidden field value with AngularJS and retrieve it using PHP

Hello, I am having trouble posting a hidden value in my PHP code. I have included both my HTML with Angular and PHP code below. When I check the result in ajax_function.php page, I am only able to retrieve the text box value and not the hidden field value. ...

How can I stop VSC from automatically inserting "require"?

Every time I edit certain JS files in VSC, it automatically inserts "require()" calls that I then have to delete. Is there a way to stop VSC from adding these lines with "require"? Appreciate any help, Didier ...

Trouble with loading images on hbs/nodejs

I'm currently working on a web application using NodeJs and express-handlebars. However, I am facing an issue with images not displaying correctly on the HTML page that is being rendered using handlebars. Here is the structure of my app: The root fo ...

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

In my project, I have a function component that shows a game board named "EnemyBoardComponent.tsx" const enemyBoardReducer = (state:number[][], action:Action)=>{ switch(action.type){ case "update": { return EnemyBoard.getGrid(); ...

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

Generate a complete screenshot of a website using Chrome 59 through code

Is it possible to programmatically capture a full-page screenshot of a website using the latest Chrome 59 and chromedriver with Selenium Webdriver, even if the website is larger than the screen size? ...

Resizing an image with six corners using the canvas technique

Currently, I am facing two issues: The topcenter, bottomcenter, left and right anchors are not clickable. I'm struggling with the logic to adjust the image size proportionally as described below: The corner anchors should resize both height and wi ...

PHP login system with Persistent Cookie feature: Stay logged in longer!

Before users log in, I want to include a "remember me" checkbox option. What method would you recommend for securely storing a cookie in the user's browser? Take Facebook as an example: they have a "remember me" checkbox that keeps users logged in e ...

Exploring the enhanced capabilities of FeathersJS by integrating express-babelify-middleware

Attempting to integrate express-babelify-middleware with FeathersJS, an error message appears in the browser console: The error reads: ReferenceError: main_run is not defined This indicates that babelify may not be functioning correctly or I might be u ...

Adobe Acrobat does not run JavaScript code in documents that are submitted for electronic signatures

Lately, I have been experiencing issues with pdfs that contain embedded javascript. The strange thing is that the javascript functions perfectly in the Acrobat Pro DC app but fails to execute when the document is sent for signature. To troubleshoot, I cre ...

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

I am looking to incorporate {{ }} within the Angular "filter" filter, specifically while nested inside an ng-repeat. Let's consider the relationship below: var categories = [ {"title":"land"}, {"title":"sea"}, {"title":"air"} ]; var vehi ...

How can child components in ReactJS be conditionally rendered based on the status of userData loading?

It seems like there might be an issue with how we handle user login in our application. Whenever a user logs in, the redux state is updated with the server response. Many components rely on this logged-in status. We pass the currentUser object down to all ...