vue设置cookie和获取cookie,vue-cookie

　　本文主要介绍了如何在Vue项目中设置反向代理和cookie设置，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

Vue设置反向代理和cookie设置

项目场景

　　最近，Vue被用于开发一个新项目。因为服务器还没到，所以调用了后端本地接口。因为在请求接口时没有跨域，所以没有反向代理。在后面，我被一个很基础的东西给践踏了，就是一些cookie的知识。记录下来，加深我的印象。

问题描述

　　在联调过程中发现调用登录接口后，调其他接口时会报错登录状态无效。之前做了很久小程序的项目突然遇到这种傻逼。

原因分析

　　首先这个问题上来了，我问了后端，后端说Cookie没传给他。那么我们来确认一下Cookie的定义和作用。

　　HTTP协议中的Cookie包括Web Cookie和浏览器Cookie，是服务器发送给Web浏览器的一小段数据。服务器发送给浏览器的Cookie将被浏览器存储，并与下一个请求一起发送给服务器。通常用来判断两个请求是否来自同一个浏览器，比如用户一直登录。

　　当从客户机接收到HTTP请求时，服务器可以发送一个Set-Cookie头和一个响应。Cookie通常由浏览器存储，然后将Cookie与HTTP头一起发送到服务器。

　　看到这个，我就去看看。当我成功调用登录接口时，后端返回了Set-Cookie，却发现浏览器没有设置。当你看到这个，你就知道Set-Cookie浏览器不起作用了。出于Cookie安全考虑，跨域Cookie不能在浏览器中获取。

解决方案

　　在Vue项目的根目录Vue.config.js中设置反向代理。

　　模块.导出={

　　devServer: {

　　//设置代理

　　代理服务器：{

　　/api: {

　　目标： 3358127.0.0.1: 8081/，//域名

　　Ws: true，//是否启用websockets？

　　ChangOrigin: true，//Open proxy:在本地创建一个虚拟服务器，然后同时发送和接收请求的数据。

　　//这样服务器和服务器之间交换数据就不会出现跨域的问题。

　　路径要求写入：{

　　^/api: /

　　}

　　请求时。

　　///api 等于 http://127.0.0.1:8081/api

　　//此时请求地址为‘http://127 . 0 . 0 . 1:8081/API/picture？“方法=上传”

　　get(/api/picture？方法=上传’)

　　搞定了。开心。

Vue项目使用js-cookie细则

　　背景：在最近的vue项目中，由于项目的token需要设置过期，当然这个过期行为的逻辑一直是由后端控制的，但是这次也要求前端监控token时间。因为懒得封装cookie，所以用了JS-cookies的cookie封装库。

什么是js-cookie

　　看名字就知道这是一个关于cookie存储的js API。根据官网的描述，它的优点是：适用于所有浏览器，接受任何字符，经过任何测试都没有bug，支持CMD和CommonJS，压缩后非常小，只有900字节。

在项目中进行安装

　　npm安装js-cookie js-cookie -保存

在项目中的入口文件（main.js）全局引入

　　从“js-cookie”导入cookie

在项目中使用

　　1.cookie set方法支持的属性有：expires-过期时间路径-设置为创建cookie域-对于指定页面->设置为对指定域名和指定域名的子域可见。安全值为false和true，表示该设置是否仅支持https，默认值为false。

　　cookie . set( key ， value )；//创建简单的cookie

　　Cookies.set(key ， value ，{ expires:27 })；//创建有效期为27天的cookie

　　Cookies.set(key ， value ，{ expires: 17，path: })；//您可以通过配置path为当前页面创建一个有效期为7天的cookie

　　2.带上饼干

　　cookies . get( key )；//获取对应于指定键的值

　　cookies . get()；//获取所有值

　　3.删除cookie

　　cookies . remove( key )；//删除普通cookie

　　Cookies.remove(name ，{ path: })；//删除指定页面路径的cookie。

　　注意：如果一个对象被存储，比如：

　　userInfo={年龄：111，分数：90 }；Cookie.set(userInfo ，userInfo)

　　提取的userInfo需要JSON解析，解析成对象：

　　let RES=JSON . parse(cookie . get( userInfo ))；

　　当然，你也可以使用：

　　cookie . get JSON( userInfo )；

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录