还记得初学前端时,一直听过 cookie,没碰它之前觉得特别简单,一听就懂。但当自己和后台成员对接时,那叫一个惨烈,搞了搞几天才好,最后弄好的时候还是懵懵的。最近突然看到第三方 cookie 快被废弃了,所以想着完成一下以前没做完的事情。
使用 cookie 真的很简单,复制的地方在于浏览器,浏览器一直这不让你用,那不让你用,好不容易知道怎么用了,结果居然要 https?好在你可以使用 mkcert 实现本地 https 测试。具体可以参考这篇文章: 借助 nginx 和 mkcert 实现本地 https://localhost 测试
我一共创建了三个案例项目:
案例说明:
- 01 前后端同源(前端直接部署在后端中)
- 02 前后端不同源(也就是第三方 cookie)注意第三方 cookie 将被废弃。同时,如果用户可以禁止第三方 cookie。配置第三方 cookie 需要以下条件
- https
- 响应标头 Access-Control-Allow-Credentials 为 true
- 响应标头 Access-Control-Allow-Origin 指定具体域,不能是 *
- cookie 中配置 sameSite=‘none’ 和 secure=true
- 客户端请求时需要开启 withCredentials (详见 [index.html] 中的代码,提供了 fetch 和 axios 的案例)
- 03 同 02,但使用原生 https 模块实现 https,而不需要借助 nginx
代码直接放在 Github 仓库 里面了,有条件的可以直接克隆,然后 npm i,接着运行对应的脚本就可以跑起来直接了。但在运行第二个和第三个项目时,需要你先创建好自己的本地 locahost 证书,不然 https 跑不起来。有什么问题的话可以直接提个 issue,我看到的话会回复的。
git clone https://github.com/Linhieng/lim-w-cookiecd lim-w-cookienpm inpm run test01