The server has sent cookies headers, however, the browser did not store the cookies

I need assistance in understanding why browsers such as Chrome are not setting cookies, even though the Set-Cookie header is present in the Response Headers:

Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 345
Content-Type: application/json; charset=utf-8
Date: Sat, 18 Jan 2020 21:15:53 GMT
ETag: W/"159-UXuykOchcveuYBb7xZpN5Luf3jU"
Set-Cookie: jwt=************; Path=/; Expires=Fri, 17 Apr 2020 21:15:53 GMT; HttpOnly
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

The application is hosted at: http://localhost:8080

javascriptexpressvue.jscookies

Answer №1

If you're encountering CORS issues, here's what you need to do:

To enable setting cookies with CORS, make sure to include the withCredentials flag when you send the request.

For more information, check out: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

The server must respond with the header 

Access-Control-Allow-Credentials: true
. Additionally, remember to replace Access-Control-Allow-Origin: * with a specific origin as wildcards are not allowed for requests that use credentials.

Learn more about these headers at:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

In Chrome 80 and above, ensure to set the directives SameSite=None and Secure on the cookie.

Find more information here:


When checking if a cookie is set, remember that you can't simply view it in Application > Cookies. The cookie will be specific to an origin like localhost:3000, so you'll need to open a tab pointing to that origin to see the cookie settings there. Since cookies are shared between tabs, you should still be able to view cookies set by the original tab.

Note that dealing with cross-origin cookies in Safari presents its own challenges. If you need to support Safari, consider researching alternative strategies to address this issue.

Answer №2

If you're facing a similar issue where the cookie appears in the response header but isn't being set in your browser, it could be because the backend and frontend are on different domains. Even though you're looking for the cookie in the frontend domain, it may have been set with the backend server's domain. To confirm this, go to the same URL as the backend server and check your browser's storage - you'll likely find the cookie there. Instructions: Chrome > f12 > application > storage > cookies.

Answer №3

When working with Axios, make sure to include the {{withCredentials:true}} statement in your request. In a Node.js application, don't forget to use app.use(cors({credentials:true})) as well.

Answer №4

If the frontend and backend are on different hosting platforms, a potential solution is to switch the sameSite property to none.

https://i.stack.imgur.com/P9ZwG.png

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

While troubleshooting the app, I encountered an error that says: "The property 'answers' cannot be read as it is undefined."

Everything was going smoothly with my app until it suddenly crashed, displaying the error message "Cannot read property 'answers' of undefined". Let's take a look at the specific piece of code causing the issue: function mapStateToProps({ ...

javascriptreactjsredux

Identifying the opening of a folder or file in an electron/node application

Is there a way to retrieve the name of a folder or file when they are opened? I have tried using fs.watch event, but it only seems to work when renaming, adding, or removing files/folders within the specified directory. For instance: //This code only de ...

javascriptnode.jselectronfs

Print custom jQuery attribute to console or log output

I need help retrieving and displaying a custom jQuery attribute in either an alert or console. Despite attempting to use console.log() to access my custom data attribute, I am unable to see its value appear. The specific value I am trying to display is d ...

javascripthtml

What is the correct way to express an object in an array?

I've encountered an issue: I'm working with an array called _daysConfig<DayConfig> When I manually populate it like this, everything functions correctly: _daysConfig: DayConfig[] = [ { date: new Date('Wed Jul 22 2020 21:06:00 GMT+02 ...

javascriptangulartypescriptionic-framework

Elevating State in React Architecture

Recently, I delved into the React documentation on lifting state up and found this helpful resource. In one of my projects, I encountered a similar issue with a slight twist. Instead of dealing with <TemperatureInput />, I had to work with <Senso ...

javascriptreactjsstateupdates

Having trouble retrieving a nested JSON value for a v-select component (itemProps) within Vuetify

Struggling to create a v-select component in Vuetify that fetches data from an API and displays it as options. The challenge arises from the JSON data having an object nested within another object, making it inaccessible. Here is my current code: <templ ...

vue.jsvuetify.js

Issue encountered while attempting to save hook arrays: Uncaught TypeError - 'choices' is not able to be

I'm in the process of creating a straightforward multiple-choice exam form that includes choices and answers. Whenever a user selects an option, it should be added to the array of choices. At the start, I have an array called exercises, which consist ...

javascriptreactjsreact-hooksmaterial-uimern

What is the best way to run a code block every time a new reaction is added in discord.js?

I need assistance with creating a bot that can count the number of specific reactions ('⚪') to a message within a specified time frame. Additionally, I want to be able to skip the remaining time by reacting to a different emoji ('X'). ...

javascriptnode.jsdiscord.js

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

javascripttypescriptzod

Removing a property from a JSON object when initiating an Ajax request in JavaScript

Looking for guidance on JavaScript and ajax as a beginner. I have a JSON with an output cell that I want to remove: { "cells": [{ "metadata": { "trusted": true, "collapsed": false }, ...

javascriptajaxjupyter-notebookgist

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

javascripthtmlangularjscanvas

Limit the number of API queries allowed in Node.js

In my quest to restrict queries made to the Battle.net API within their limits of 100 calls per second and 36,000 calls per hour, I am facing a challenge. The current implementation of my code is as follows: var async = require ('async'); var b ...

javascriptnode.jsasynchronousrate-limitingthrottling

Objects within the Prototype in Javascript

While delving into the world of AngularJS, I stumbled upon an interesting revelation - when objects are placed in a prototype object, any instances inheriting from that prototype will alter the prototype's objects upon assignment. For example: funct ...

javascriptangularjs

What is the best method for sending a PHP variable to an AJAX request?

I am working with three files - my main PHP file, functions.php, and my JS file. My challenge is to pass a PHP variable to JavaScript. Below is a snippet from my MAIN PHP FILE: function ccss_show_tag_recipes() { //PHP code here } Next, here's t ...

javascriptphpjqueryajaxwordpress

merging inline scripts within the <head> section

I have the following code snippet in my HTML file and am looking for ways to optimize its loading process. <script type="text/javascript"> function downloadJSAtOnload() { var element1 = document.createElement("script"); element1.src = "js/jque ...

javascripthtml

Setting up gulp-typescript for Angular 2: A comprehensive guide

Right now I am utilizing the tsc compiler with the watch flag in the command prompt. It functions correctly, loading all definition files and successfully compiling each angular2 file. However, it is quite cumbersome to use via the shell window. My object ...

javascripttypescriptgulpecmascript-6angular

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

javascripthtmlvue.js

How can we stop self shadowed faces from being illuminated?

Currently, I am working on creating a city scene in Three.js and experimenting with lighting and shadows. Specifically, I am focusing on a single building that was modeled in 3DS Max, then exported to OBJ format, and converted using a Python converter thro ...

javascriptthree.jslightingshadows

res.json cannot be called

I have a file that contains the following function which returns JSON data. I am trying to call this function from another file. exports.me = function(req, res) { var userId = req.user._id; User.findOne({ _id: userId }, function(err, user) { ...

node.jsexpressasynchronous

Adjusting editable property in FullCalendar during script execution

Currently, I am working with Angular JS and fullCalendar to customize the functionality of my calendar. My goal is to change the editable property of the calendar when a button is clicked. Although it seems like a straightforward task, I am facing difficul ...

javascriptjqueryangularjsfullcalendar