Unable to set the sameSite and secure attributes of vue-cookies

Question

I'm using vue-cookies for my vue.js project. I'm setting the cookie from the following code:

this.$cookies.set('session',response.data.sessionCookie,'7d',null,null,true,'None')

But when I look at the cookie, it is not set, but when I use the following code:

this.$cookies.set('session',response.data.sessionCookie)

I can see that the cookie is set. what should I do? Attached is a screenshot of setting the cookie and my sample code. I'm using this https://www.npmjs.com/package/vue-cookies

Please check the highlighted text where I set the cookie

Using the second piece of code, where no attributes are used, my cookie is set and I can see it in the cookie

Answer 1

This may be because you are trying to set a secure cookie in a development environment using http://, which is not secure.

According to MDN documentationInstructions on secure cookies:

You can try testing this feature on a secure server, or run the Vue CLI in safe mode. To do this, add the following to vue.config.js in the root directory of your project:

module.exports = {
  devServer: {
    https: true
  }
}

Make sure that after restarting the development server with these settings, type https://localhost:8080/ in your browser, if you type http:// it will Will not redirect.