1.背景
Chrome升級到80版本以上會將原來預設值 SameSite=None 修改為SameSite=Lax（其它瀏覽器，例如safari，firefox等都有此類似計劃），導致跨站cookie無法傳遞，從而導致類似登入失敗等問題。通用的解決方案是將涉及業務開發的所有域名下的cookie設定成"SameSite=None;Secure;"，但該方案前提條件要求訪問協議必須是https，然而目前前端本地開發大部分都是http，導致請求還是無法攜帶cookie，因而需要將本地http服務升級為https。
關於samesite的更多介紹可以檢視阮老師的文章
2.整體方案
2.1 基於webpack-dev-server
如果您的本地服務是通過webpack-dev-server開啟的，webpack-dev-server支援開啟https服務，它提供了兩種配置方式:
方式一
devServer: {
https: true
}
複製程式碼此設定使用了自簽名證書，故通過 例如http://h5.dev.weidian.com:9003/pages/index.html這樣的開發地址訪問時，瀏覽器會有安全風險提示，需主動信任後方可訪問（主動忽略風險，雖然能開啟https服務，但可能在個別場景下會有異常）。
方式二
devServer: {
https: {
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
}
複製程式碼此設定需要由開發者自行提供證書，如果開發者提供了對應域名的證書，通過https訪問該域名時，瀏覽器就不會有安全風險提示。
2.2 生成證書和祕鑰
假如採用方式二，就必須提供證書和祕鑰，傳統的證書生成方案（例如 OpenSSL）需要各種命令配置，比較繁瑣，故這裡提供了一種相對簡單方便的證書生成方案，步驟如下：
建立證書基於mkcert這個工具，相關詳細資訊可檢視官方教程
第一步：安裝 mkcert
brew install mkcert // On macOS, use Homebrew
複製程式碼第二步：生成根證書
mkcert -install
複製程式碼第三步：本地新建一個資料夾，並進入到該目錄（用於儲存證書）
mkdir ca
cd ca
複製程式碼也可不用放在專案中，通用的解決方案是放在磁碟中，比如使用者目錄(/User)
第四步：生成所需域名對應的本地證書，比如http://h5.dev.weidian.com
mkcert h5.dev.weidian.com
複製程式碼命令執行完之後，在該檔案下會生成 h5.dev.weidian.com-key.pem（私鑰）和h5.dev.weidian.com.pem（證書）兩個檔案，也就是webpack-dev-server配置需要的檔案。
第五步：開啟自己的專案，將步驟4生成的檔案拷貝到專案中，然後修改webpack配置
devServer: {
https: {
key: fs.readFileSync('./cat/h5.dev.weidian.com-key.pem'),
cert: fs.readFileSync('./cat/h5.dev.weidian.com.pem')
}
}
複製程式碼重啟專案，開啟開發地址，結果如下：
2.3 一個自動生成證書和祕鑰的庫
除了手動生成證書和祕鑰，還可以通過devcert這個庫編寫少量程式碼來生成證書和祕鑰，方式如下：
<!--webpack.config.js-->
async webpackConfig(){
let ssl = await devcert.certificateFor("h5.dev.weidian.com", { getCaPath: true });
<!--key和cert分別就是開啟Https服務的證書和祕鑰-->
const { key, cert } = ssl;
return {
"dev-server":{
https: {
key, cert;
}
}
}
}
module.exports = webpackConfig()
複製程式碼3.總結
未來隨著chrome升級，samesite的的預設設定必然會對本地開發產生重大影響，提前進行技術儲備是必然的，個人可以結合公司開發情況酌情使用。