寫在前面：這篇文章解決的是 因為跨域無法攜帶cookie 的問題，而不是 跨域 問題，跨域問題見 Chrome 96 版本無法發(fā)送跨域請求的問題^[1]

12.15更新：感謝 @思竹喧 老哥提供issue，有些人無法使用的原因找到了，因為我的邏輯是沒有攜帶cookie才使用插件強制攜帶cookie，而有些情況需要清除原來的cookie強制替換，因此給了個強制替換的入口。下載鏈接已更新

使用方法

老規(guī)矩，先放工具，再講內(nèi)容。

下載 插件^[2]，或者百度網(wǎng)盤提取碼:pdu2^[3]

點擊Chrome瀏覽器右上角… =>更多工具=>拓展程序

打開開發(fā)者模式，拖入zip文件，立即生效

通過右上角插件按鈕可以將插件固定在頂端

注意：在某些場景下（如異地登陸、注冊、驗證碼等），cookie情況較復(fù)雜，可能會產(chǎn)生驗證失敗的情況，如遇上述情況，關(guān)閉插件即可。

如果有人遇到了還是不行的問題，可以加我qq598033121讓我看一下～

背景

Chrome 51 開始，瀏覽器的 Cookie 新增加了一個SameSite屬性，用來防止 CSRF 攻擊和用戶追蹤。谷歌默認SameSite屬性為Lax。80版本開始，跟SameSite相關(guān)的兩個屬性，SameSiteByDefaultCookies和CookiesWithoutSameSiteMustBeSecure默認設(shè)置為default，意思是必須同域才能攜帶cookie。如果想要跨域攜帶cookie的話，必須把cookie屬性設(shè)置成secure，意思是cookie必須通過https請求發(fā)送。

在90版本，我們可以簡單的在chorme://flags中把SameSite相關(guān)屬性設(shè)置為disabled即可解決問題。
引用：解決chrome瀏覽器請求無法攜帶Cookie問題^[4]

91版本的chrome在chorme://flags中取消了這兩個選項，導(dǎo)致無法禁用，但是我們?nèi)匀豢梢酝ㄟ^命令行禁用。
引用：知乎：91版本無法攜帶cookie的問題^[5]

在94版本，命令行也無法解決問題。
如果我們不換種方式去解決這個問題，我們就無法使用chrome開發(fā)。
當然，逃避這個問題也不是不行，并不是離開了最新版本的Chrome就活不下去。有些人選擇了火狐瀏覽器或360瀏覽器開發(fā)，有些人選擇回退chrome至89版本。
但是不可能一味的逃避問題，有大佬給出了一些解決方案。
引用：知乎：chrome 94預(yù)計cookie策略再加碼，怎么放心大膽的升級\?^[6]

那么，能不能有更便捷的解決方案呢？

解決方案及源碼分享

另辟蹊徑

先不管SameSite什么的原理，我們遇到的這個問題的本質(zhì)是cookie帶不上，我們?nèi)绻軓娦薪o它帶上cookie，問題不就迎刃而解了嗎？

這時候，我們就可以使用谷歌官方提供的插件API Chrome extence官方文檔^[7] 去完成cookie的攜帶工作。

思路很簡單，通過chrome拓展插件提供的webRequestBlocking API和cookie API 讀取瀏覽器中的cookie，同時攔截沒有攜帶cookie的請求，強制使其攜帶同源cookie。

大家可以自己直接去看源碼，思路很簡單
github.com/chirpmonste…^[8]

首先是調(diào)用獲取cookie的API，注意這個API是異步的

function updateCookie() {
    chrome.cookies.getAll(
        {},
        (cookie) => {
            storeCookie(cookie)
        },
    )
}
復(fù)制代碼

然后緩存cookie，并解析為map，等待攔截請求時使用

function storeCookie(cookie) {
    //cookie更新校驗
    if (state.cookieStr === JSON.stringify(cookie)) {
        console.log('cookie緩存未更新')
        return
    }
    state.cookieStr = JSON.stringify(cookie)
    const newCookieMap = new Map()
    //解析domain
    cookie.forEach((item) => {
        const str = (newCookieMap.get(item.domain) || '') + item.name + '=' + item.value + '; '
        newCookieMap.set(item.domain, str)
    })
    state.cookieMap = newCookieMap
    console.log('cookie緩存已更新')
    console.log(cookie)
}
復(fù)制代碼

添加請求攔截器的API，對所有請求調(diào)用setCookie方法

function addRequestListener() {
    chrome.webRequest.onBeforeSendHeaders.addListener(
        setCookie,
        {urls: ["<all_urls>"]},
        ["blocking", "requestHeaders", "extraHeaders"]
    );
}
復(fù)制代碼

正則解析匹配攔截到的請求的domain，并添加進請求頭

function setCookie(details) {
    if (!state.cookieStatus) {
        return
    }
    updateCookie()
    //如果已經(jīng)有cookie，return
    for (let i = details.requestHeaders.length - 1; i >= 0; i--) {
        if (details.requestHeaders[i] === 'Cookie') {
            return
        }
    }
    const url_to_domain_reg=/://.*?//i
    const domain_to_subdomain_reg=/.([a-z0-9-])+.[a-z]+(:[0-9]*)?/g
    if (!details.url) {
        console.log(details+'本次未成功攜帶Cookie，請確認該請求是否需要攜帶Cookie')
        return
    }
    let domain=details.url.match(url_to_domain_reg)?.[0]??details.url //正則獲取domain或者保底
    domain = domain.match(domain_to_subdomain_reg)
    domain = domain?.[0]?.split(':')?.[0]
    //網(wǎng)盤和谷歌商城存在驗證問題
    let forbiddenList=['baidu','google','gitlab']
    for(let i=0;i<forbiddenList.length;i++){
        if(domain?.includes(forbiddenList[i])){
            return
        }
    }
    const newCookie = state.cookieMap.get(domain)
    //如果cookie不存在，return
    if (!newCookie) {
        return
    }
    details.requestHeaders.push({name: 'Cookie', value: newCookie})
    console.log('成功攜帶cookie:' + details.url)
    return {requestHeaders: details.requestHeaders}
}
復(fù)制代碼

完成！

github.com/chirpmonste…^[9]