记一次cas登录遇到的各种坑~
1. cas原理
【基础】项目开始前需理解下CAS:
下面开始步入正题啦
【环境】：我们的项目，前端共包含4种环境：
- 线上环境
- staging环境（测试环境）
- 提测环境
- 本地环境
线上、staging略略略，不会涉及跨域问题，下面针对本地环境进行叙说：
【背景】
未接入cas前：
启动：npm start
访问: localhost:3000
解决跨域：
2. cas登录过程
3. cas 白名单？
背景：用户名、密码验证通过后，cas平台会跳转至 service 地址上。service 会有白名单，即仅能跳转至 cas 白名单地址上
问题：如果测试地址多有个，service 能否为 测试地址域名呢？ An：可以，不建议。需要cas 白名单中添加多个测试地址~
4. same-site
google浏览器一直刷新
3. 更改配置：chrome://flags/#same-site-by-default-cookies
原因：www.chromestatus.com/feature/508…
问题1
【接入CAS】：
现象：登录完成后，页面一直刷新。咋回事？
浏览器地址：localhost:3000
背景：
1. 环境：后端两种环境stagging、preview，前端3种环境本地、stagging、preview
2. 本地存在跨域，项目中通过proxy解决跨域
思路：
1.访问API,request url:localhost:../api/meta/tablelist?pageSize=10&page=1
2.返回特定code
3.window.location=..login => 登录完成(1.当前域setCookie 2.返回ticket)
4.后端 localhost:... setCookie => 返回前端页面
5.前端页面一直刷新
原因：后端validate方法：localhost下的cookie与ticket与config 与ticket比对，获取
不到用户信息 => 前端一直跳登录页
解决思路：
1. 后端增加一环境localhost（config中增加localhost, 例如：stagging,localhost）
2. 前端API访问stagging/api/...
- cors解决跨域
- 浏览器配置代理
【解决方式】
保证request url的域名种上cookie
- 配置代理 使用浏览器插件switchyOmega，配置代理
浏览器中访问：meta.dptest.pt.xiaomi.com
其实这种方式类似于更改windows下的host文件（尝试更改host，未成功哈~） 此时看，request url: meta.dptest.pt.xiaomi.com/api/...
- 后端解决跨域 我们后端通过CORS解决的跨域，前端无改动；
另外有一点需要注意的是： 规范中提到，如果 XMLHttpRequest 请求设置了withCredentials 属性，那么服务器不得设置 Access-Control-Allow-Origin的值为* ，否则浏览器将会抛出The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' fetch请求的地址，改成绝对路径地址：
可以啦！！
CORS跨域中遇到的坑：
后端一直获取不到origin，肿么办？
当跨域时，浏览器自动带上origin，获取不到，一定是后端的锅~
其实不是的，前端通过proxy代理了，导致fetch请求不存在跨域，故origin一直为空~
【总结】 项目中的小白问题，浏览器访问：a.com, 调用b.com/api/..., 可以带b.com的cookie吗？ 可以的
问题2
未登录时，后端返给前端状态码？
原因：重定向存在跨域（参考：zhuanlan.zhihu.com/p/32662751）
前端本地环境、提测环境，访问的后端url地址 与 login地址不同，存在跨域
解决方式：
- 接口返回特定的code
- 浏览器配代理，fe、ui、qa均需要配置~
