Encountered difficulty in setting cookie with ngx-cookie-service

I'm currently using angular 9 and I have an issue with setting a cookie. I have integrated ngx-cookie-service 3.0.4 into my project and I'm attempting to set the cookie as shown below:

this.cookieService.set("cookieName", user.tokenId, date, "/", "localhost:4200");

However, when attempting to retrieve this cookie, I am receiving a null response and do not see the cookie in the browser. Here is how I am trying to retrieve the cookie:

console.log("COOKIE: ", this.cookieService.get("cookieName));

What could I possibly be doing wrong?

javascriptangulartypescriptngx-cookie-service

Answer №1

When cookies are being set for the localhost, it is important to note that using 'localhost:4200' as the domain is not allowed. This limitation is intentional and you can find more information about it here: Cookies on localhost with explicit domain

In such scenarios, it is recommended to either pass in null or simply omit the domain parameter when the application is running on localhost.

const hostName = isLocal ? null : 'HOST_NAME';
this.cookieService.set("cookieName", user.tokenId, date, "/", hostName);

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

JQuery Form Wizard - Adding a Finish Button Linked to a Page

Having some difficulty linking the finish button on my Jquery Form Wizard within my Flask App to a link. I attempted to test the functionality by creating a simple alert, but that didn't work either. I'm certain that I missed a step somewhere, b ...

javascriptjqueryflask

Error thrown: SyntaxError - Forbidden break statement in AJAX code execution

Trying to exit a loop nested within a statement has been a challenge. Despite researching similar questions on stackoverflow, I have not found a solution that works. Below is the current code in question: for (var i = 0; (i < 10); i++) { ...

javascriptjqueryajax

jQuery - patience is required until all elements have completely faded away

I am facing a unique challenge: I need to trigger an action after two specific elements have been faded out simultaneously. The code snippet for this task is as follows: $("#publish-left, #publish-right, #print-run").fadeOut(function(){ //do something ...

javascriptjqueryhtml

Which would be more effective: implementing Spring Security for role-based authorization, using Angular Route Guards, or combining both approaches?

I'm currently working on a project using Spring Boot for the backend and Angular for the front end. I'm wondering if it's best practice to implement both Spring Security role-based authentication and Angular route guards, or if just using Sp ...

angularspringspring-bootspring-securityrole-base-authorization

Experiencing problems with React createContext in Typescript?

I've encountered a strange issue with React Context and Typescript that I can't seem to figure out. Check out the working example here In the provided example, everything seems to be working as intended with managing state using the useContext ...

reactjstypescriptreact-hooksreact-context

Refreshing user session with the help of selenium's webdriver functionality

Our application requires some external inputs for testing purposes, but this data is only accessible when a user is logged in. To streamline the process and avoid requiring the user to log in multiple times, we store their credentials in a session upon ini ...

javajavascriptsessionseleniumselenium-webdriver

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

javascriptjqueryhtmlknockout.jssass

Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace. I am looking to convert this into a web application that can be accessed through a browser. I believe thi ...

javascriptangulartypescript

There was an unfortunate parsing failure in the module: An unexpected token appeared at position 4

I need help adding the FULLCALENDAR feature to my Angular v14 project. Despite going through all the necessary setup steps, I encountered an unexpected error. Can anyone provide guidance on how to resolve this issue? package.json "@fullcalendar/angul ...

angularangular-materialangular14

JQuery ajax fails to trigger the success function

Upon using an ajax request to insert data into the database, I encountered an issue where the button message did not update after the submission was successful. Initially, I set the button text to Please wait... upon click, and intended to change it to Don ...

javascriptjqueryhtmlajaxdom

Distinguishing variations within subcategories that stem from a common origin

In my code example, I have two interfaces that both extend a common base interface. The "String" function takes an argument of type "StringAsset". My expectation was that if I were to call the "String" function and pass it a value of "NumberAsset", TypeScr ...

typescript

Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element: .dash_border{ border: dashed; stroke: 2px; margin:20px; } My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving ...

javascriptjqueryhtmlcss

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

javascriptjqueryhtmlcss

Retrieve webpage content using an ajax request in JavaScript

I'm working on an HTML page with an Ajax call to load table content. <html> .... <script sec:haspermission="VIEW_NOTE" th:inline='javascript'> require(['app/agent/viewGlobalAgent'], function (){ ...

javascripthtml

React's setInterval acting unpredictably

Creating a stopwatch functionality in React was my recent project. To achieve updating the number every second, I implemented setInterval as follows: import React, {useEffect, useState, useRef} from 'react'; const MAX_TIMER = 5; export defa ...

javascriptreactjssetinterval

I encountered an issue with npm run build when attempting to launch a react application on Firebase, resulting in an error

npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\Myname\Desktop\god\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: file 'C:\Users\Myname\Desktop\god\package.json' not f ...

javascriptnpm

What might be the reason why the custom markers on the HERE map are not displaying in Angular?

I'm having trouble displaying custom icons on HERE maps. Despite not receiving any errors, the icons are not showing up as expected. I have created a demo at the following link for reference: https://stackblitz.com/edit/angular-ivy-zp8fy5?file=src%2Fa ...

angulartypescriptheremaps

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

ReactJS component experiencing issues with loading images

In my React project, there is a directory containing several images, and I am attempting to import them all into a carousel using Bootstrap. The current code looks like this: import Carousel from 'react-bootstrap/Carousel'; const slideImagesFold ...

javascripthtmlreactjsbootstrap-5

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

I'm currently working on a component that includes a form with various inputs and a text editor, specifically Jodit. One issue I've encountered is that when there are changes in the Jodit editor's content, I need to retrieve the new HTML va ...

javascriptreactjsjodit