登陆cookie问题~

记一次cas登陆遇到的各类坑~

【基础】项目开始前需理解下CAS:

下面开始步入正题啦

【环境】：咱们的项目，前端共包含4种环境：

• 线上环境
• staging环境（测试环境）
• 提测环境
• 本地环境

线上、staging略略略，不会涉及跨域问题，下面针对本地环境进行叙说：

【背景】

未接入cas前：

启动：npm start

访问: localhost:3000

解决跨域：

【接入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

1. 配置代理 使用浏览器插件switchyOmega，配置代理

浏览器中访问：meta.dptest.pt.xiaomi.com

其实这种方式相似于更改windows下的host文件（尝试更改host，未成功哈~） 此时看，request url: meta.dptest.pt.xiaomi.com/api/...

2. 后端解决跨域 咱们后端经过CORS解决的跨域，前端无改动 fetch请求的地址，改为绝对路径地址：

能够啦！！

CORS跨域中遇到的坑：

后端一直获取不到origin，肿么办？

当跨域时，浏览器自动带上origin，获取不到，必定是后端的锅~

其实不是的，前端经过proxy代理了，致使fetch请求不存在跨域，故origin一直为空~

【总结】 项目中的小白问题，浏览器访问：a.com, 调用b.com/api/..., 能够带b.com的cookie吗？ 能够的