登陸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嗎？ 能夠的