vue3的axios取消cookie

Vue组件的通信方式

1. 父子组件：props / $emit
2. 父子组件：$parent/$children 与 $ref
3. 父子、兄弟、隔代组件：$emit / $ on 通过设置一个空的App.vue作为一个模版的事件中心，用来触发事件和监听事件
4. 父子、隔代组件：provide/inject
5. 父子、兄弟、隔代组件：Vuex

伪类和伪元素

伪类

作用于元素选择器上

• 单冒号:
• 常见伪类：:link、:visited、:hover、:active、:first-child和:nth-child

伪元素

作用于元素上

• 最好是双冒号：::
• 常见的伪元素：::after、::before和::first-letter

CSS3新特性

• 过渡属性：transition

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

• 动画属性：定义关键帧

@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
}

• 形状转换：transform： rotate旋转角度； translate位移； scale：缩放
• 阴影：box-shadow

跨域资源共享 CORS

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

简单请求

• 满足一下两种条件就属于简单请求：

• 请求方法属于以下三种之一：

• HEAD
• GET
• POST

• HTTP头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

• Http请求头中添加origin字段，包含协议+域名+端口
• 如果origin不在指定的源内，服务器返回一个正常的Http响应，不包含Access-Control-Allow-Origin字段，浏览器会抛出一个错误
• 如果origin在指定的源内，服务器会多返回几个信息字段，都以Access-Control开头

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

此时可以进行跨域请求

非简单请求

• 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
• 非简单请求在正式通信前会增加一次Http查询，称为“预检”
• 浏览器询问服务器当前网页是否在服务器的许可名单内，以及Http动词和头部信息哪些可以使用，得到肯定答复后浏览器才会发出正式XMLHttpRequest，否则就报错
• "预检"请求用的请求方法是OPTIONS
• 服务器通过预检后会返回Access-Control-Allow-Origin字段
• 如果服务器不通过预检会返回正常Http，没有包含任何cors字段，浏览器打印台会抛出错
• 服务器通过预检会返回cors字段

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

cookie

cookie 是后端可以存储在用户浏览器中的小块数据。 Cookie 最常见用例包括用户跟踪，个性化以及身份验证。

如何生成cookie

当name、domain、path 这3个字段都相同的时候，cookie会被覆盖

• 服务器生成
  通过set-cookie字段生成
• 客户端生成
  通过document.cookie字段生成

cookie的设置、读取、删除

cookie设置

• 服务端

• expires：过期时间、domain：域名、path：路径、secure：安全模式、HttpOnly：设置是否允许js进行访问

• 客户端

• 客户端没有专门操作cookie的方法
• 只能通过document.cookie = "key=name"来设置cookie
• 设置cookie

function setCookie(name,value,iDay){
    var oDate = new Date(); //创建时间戳
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = name + "=" + value + ";expires=" + oDate;
}

• 读取cookie
  只有一个‘=’的情况，即key = value的情况

function getCookie(name){
    //例如cookie是"username=abc; password=123"
    var arr = document.cookie.split('; ');//用“;”和空格来划分cookie
    for(var i = 0 ;i < arr.length ; i++){
        var arr2 = arr[i].split("=");
        if(arr2[0] == name){
            return arr2[1];
        }
    }
    return "";//整个遍历完没找到，就返回空值
}

• 删除cookie

function removeCookie(name){
    setCookie(name, "1", -1)//第二个value值随便设个值，第三个值设为-1表示：昨天就过期了，赶紧删除
}

如何让前端后端不能读取cookie

• 设置HttpOnly前端不能访问
• 设置withCredentials=false不携带cookie

盒模型

• 标准盒模型box-sizing:content-box;



• IE盒模型box-sizing:border-box;