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

Change the font awesome class when the button is clicked

Here is the code I have in this jsfiddle. I am trying to change the font awesome icon on button click using javascript, but it doesn't seem to be working. I am new to javascript, so please pardon me if this is a silly question. HTML <button id="f ...

javascriptjqueryhtmlfont-awesome

Can a single page be used to send email?

My PHP form is currently sending data to another page, and the layout does not look good. I want to keep the form on the same page so that when a user fills it out, the information is submitted without redirecting. If any of the inputs are empty, I would l ...

phpjavascriptajax

The equation:() is malfunctioning

Here is a code snippet I'm working with: $("#button").click(function () { for (var i = 0; i < 4; i++) { setTimeout(function () { $(".rows:eq("+i+")").css("background-color", "blue"); ...

javascriptjquery

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11

Images on Heroku vanish with each new push

Seeking Assistance! I recently deployed my nodejs backend app on Heroku, which involves a functionality where users can upload documents in jpg, jpeg, or png format. These documents are stored in the static folder (/assets/docs). Before pushing the updated ...

node.jsexpressherokumongoosegitignore

I'm experiencing some strange symbols on my page that look like ''. It appears to be a problem occurring between the servlet and the Javascript. How can I resolve this issue?

After retrieving a CSV file from my servlet, I noticed that characters like 'é', 'á' or 'õ' are not displaying properly on my page. Strangely, when I access the servlet directly via browser, everything appears fine. I atte ...

javajavascriptjqueryjspservlets

Copy values of multiple input fields to clipboard on click

I have a collection of buttons in my Library, each with different text that I want to copy when clicked function copyTextToClipboard(id) { var textElement = document.getElementById(id); textElement.select(); navigator.clipboard.writeText(textElement. ...

javascripthtmlfunctioncopyclipboard

Sending JSON Data from Angular2 Component to Node.js Server

Currently, I am facing an issue where I am unable to successfully insert data into a database using Angular2 and Node.js. Upon running my script, I use console.log(this.address); to verify that I am passing json, and the output in the console is as follow ...

javascriptjsonnode.jsangular

How can I utilize JQuery to dynamically refresh a dropdown menu?

My dropdown list is initially empty: <div> <label>Boarding Point </label> <select title="Select pickup city" id="boardingDropdown"> </select> </div> I am trying to popula ...

javascripthtmljqueryajax

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

javascriptnode.jsangulartypescriptnpm

Experiencing difficulty establishing a connection with Docker when trying to use mongodb and express

I'm currently setting up Docker in my projects to expand my knowledge. One of my projects is a Node.js application that utilizes Express and MongoDB packages. While the Docker setup is configured correctly and running smoothly, I encounter an issue ...

mongodbdockerexpressdocker-composedockerfile

Dealing with special characters in Mustache.js: handling the forward slash

I have a JSON file that contains information about a product. Here is an example of the data: { "products": [ { "title": "United Colors of Benetton Men's Shirt", "description": "Cool, breezy and charming – this s ...

javascriptjsonmustache

Exploring the capabilities of arrays within Ajax

Below is the original code I wrote in JavaScript: var wt_val = []; for (i = 0; i<human_wt.length; i++){ var mult; mult = data_list[basket_list[button_port_name][i]].map(x => x*(wt[i]/100)); wt_val.push(mult); ...

javascriptpythonajaxflask

Utilizing ReactJS to display a new screen post-login using a form, extracting information from Express JSON

I am facing a challenge with updating the page on my SPA application after a successful login. I have successfully sent the form data to the API using a proxy, but now the API responds with a user_ID in JSON format. However, I'm struggling with making ...

javascriptnode.jsreactjsexpressjsx

What is the method for obtaining a dynamic route path within the pages directory in Next.js?

In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query. I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1. Currently, ...

javascriptroutesnext.js

Guide on interacting with ExpressJS REST API endpoints using C# code

After successfully setting up a backend server with multiple endpoints using NodeJS and the ExpressJS framework, I connected these REST Api Endpoints to a Mongodb Database. However, for a specific project requirement, I needed to write some code in C# tha ...

c#node.jsrestexpress

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

javascriptjqueryhtmlcssdatatables

Dealing with special characters and HTML tags in Vue: How to eliminate them from your code

Resolved using vue-html-secure, much appreciation Received from API - specs: &lt;table&gt;&lt;tr&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Диагональ - 19&quot; &lt;/td& ...

vue.jsnuxt.js

Tactics for developing an intricate AJAX and jQuery form with nested components

We have a complex form to construct that will allow the creation or updating of multiple instances of entity A, where each instance of entity A can have multiple instances of entity B. Both types of entities are intricate with many fields and dropdowns, b ...

javascriptjqueryajaxdesign-patternsforms

The element does not have the 'ariaHidden' attribute present

I attempted to use the area-hidden property in a Vue file, but encountered an error. I also experienced a similar issue with the data-dismiss property. Do I need to perform additional setup to utilize the aria-hidden property? <button type="button& ...

htmlvue.jsnuxt.js