跨域set-cookie无效的解决方案

上次在项目中做一个手机验证码功能时遇到后端set-cookie无法成功的问题,相信很多人都会遇到,今天分享出来,算是做个记录,也给有需要的小伙伴一个参考,下面先说一下场景

手机验证码实现步骤

  1. 用户输入手机号并点击发送验证码按钮

    此时是向后端服务器发起高请求,传递手机号码
  2. 后端接收到手机号码后通过短信服务商的接口发送短信到手机号

    由于安全性问题,一般服务商的接口都是由后端发起请求,那验证码是怎么来的呢?当然是我们自己后端生成的(一般是生产一个4位或6位随机数字号码),短信接口只负责发送
  3. 用户收到验证码后,在表单中输入并发送验证
  4. 后端收到验证码与第2步生成的进行校验,一致则通过,否则不通过

问题来了,我们都知道http请求是无状态的,即每个请求都是独立的,两个请求间没有任何联系,但上面的步骤中,用户发起了两次请求(第1步和第3步),后端怎么知道是同一个人呢?万一当时有10个人同时获取验证码,且都执行完所有步骤,怎么实现各自第1和第3步的对应关系进而进行第4步校验?于是我们引入session

什么是session

session是保存的服务器的一个数据存储机制,一般用于存储用户状态数据,你可以理解为客户端的cookie,因为它们很像,同样是有key/value和有效时间,只是一个在服务端,一个在客户端。这跟本文有什么关系呢?肯定有关系,关系大了去了,不然我写干嘛(自嗨中~~~)

咳~咳。。回归正题,刚刚说了http是无状态的,而我们现在又要把第1步和第3步关联起来,怎么关联呢?session+cookie出马,具体原理如下

  1. 第一次接到请求,后关会生成一个sessionid来标识当前会话(我使用express-session来实现),并通过set-cookie响应头在客户端生一个cookie,大概长这样,

        connect.sid=s%3Au9xG34DBU1vOVbIpCax0neMxL_Uc1fIC.4ndNJL5G%2B41DtUSLbQ%2BW75Z9wduOAON4lfu2JGTDe5
  2. 由于cookie会自动发送给服务器,所以当前用户后面的所有请求都会携带这个sessionid给服务器,服务器通过这个sessionid来标识是否为同一个用户,问题就迎刃而解了...

手机验证码功能具体实现步骤

  1. 前端:

    1. 用户输入手机号,点击获取验证码
    2. 发送请求到后端,
  2. 后端:

    1. 后端生成随机验证码,保存在session,并给前端响应connect.sid(express-session会Set-Cookie响应头)
    2. 并通过手机接口发送给用户手机号(需要后端配置手机短信接口,一般需要购买,这里不做额外说明)
  3. 前端:

    1. 浏览器接收到Set-Cookie响应头后,自动把sessionid写入浏览器cookie
    2. 用户接收到手机验证码并填写到对应输入框
    3. 用户点击按钮发送验证码到后端进行校验(sessionidcookie自动发送到后端)
  4. 后端:

    1. 后端拿到验证码,并与第3步保存在session的随机验证码进行比较,一致则响应成功,否则响应失败

通过以上步骤,正常情况下你已经能实现手机验证码功能了,可我偏偏遇到了非正常情况,这也是我今天这篇文章的意义,由于开发阶段为前后端分享,请求是产生了跨域,明明已经正确响应了Set-Cookie,允许了CORS跨域,但浏览器的cookie中就是看不到connect.sid的身影,关键浏览器还不报错。

于是各种千里寻她千百度,最后发现Set-Cookie在跨域时默认是被浏览器忽略的,解决的方案是两步:

  1. 后端设置"Access-Control-Allow-Credentials":true响应头
  2. 前端发起请求时设置 withCredentials:true 请求头

搞定,收工,希望对你有帮助

你可能感兴趣的:(cookie,跨域,验证码)