此貼接上貼實(shí)踐解決跨域問題的三種方式剖析

今天繼續(xù)做我的schub項(xiàng)目的時候，遇到了苦惱我一天的問題，expresss-session沒有持久化，我在后端把登錄的狀態(tài)存在req的session里，下次發(fā)post的時候再發(fā)請求的時候req.session里面存的用戶的狀態(tài)的字段沒了。

我上次用到express-session的時候還是做得那個微博系統(tǒng)，前后端雜糅的項(xiàng)目（node+ejs），那時候就沒遇到這個問題，后來排查這個問題的時候，google 網(wǎng)上有關(guān)express-session的項(xiàng)目，發(fā)現(xiàn)這些項(xiàng)目全是前后端在一起的架構(gòu)，然后我就意識到一個問題，前后端在一起域名和端口都是一致的，當(dāng)前后端分離在本地調(diào)試的時候，我處理了很多跨域問題，那么現(xiàn)在，是不是由跨域問題引起的。

我本地打印調(diào)試了fetch發(fā)送的請求，（因?yàn)榭缬蛎看握埱蟀l(fā)了一個option），發(fā)現(xiàn)每次的session都是新的，sessionId不同，那么怎么保持session會話一致呢。

后來差文檔，發(fā)現(xiàn)：

對于跨域 XMLHttpRequest 或 Fetch 請求，瀏覽器不會發(fā)送身份憑證信息。如果要發(fā)送憑證信息，需要設(shè)置 XMLHttpRequest 的某個特殊標(biāo)志位。對于附帶身份憑證的請求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”。

用了Access-Control-Allow-Credentials: true，就不能設(shè)置Access-Control-Allow-Origin:'*'了。所以可以設(shè)置，當(dāng)A用戶進(jìn)來的時候，我們設(shè)置A用戶為白名單就好，同理B用戶也是。也就是說，誰訪問就把誰的域設(shè)置為白名單就可以了。

Access-Control-Allow-Origin: <origin> | *

所以我的處理一般是：

app.all('/*', (req, res, next) => {res.setHeader('Access-Control-Allow-Origin', req.headers && req.headers.origin ? req.headers.origin : '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie, Authorization');res.setHeader('Access-Control-Allow-Credentials', true);//post請求之前，會發(fā)送一個options的跨域請求if (req.method === 'OPTIONS') {res.sendStatus(200);} else {next()} })

由于前端react里面請求是fetch發(fā)送的，fetch的原理就是xhr+promise,
那么fetch肯定也有這么一個維持身份憑證的消息頭，

看MDN：

XMLHttpRequest.withCredentials 屬性是一個Boolean類型，它指示了是否該使用類似cookies,authorization headers(頭部授權(quán))或者TLS客戶端證書這一類資格證書來創(chuàng)建一個跨站點(diǎn)訪問控制（cross-site Access-Control）請求。在同一個站點(diǎn)下使用withCredentials屬性是無效的。此外，這個指示也會被用做響應(yīng)中cookies 被忽視的標(biāo)示。默認(rèn)值是false。如果在發(fā)送來自其他域的XMLHttpRequest請求之前，未設(shè)置withCredentials 為true，那么就不能為它自己的域設(shè)置cookie值。而通過設(shè)置withCredentials 為true獲得的第三方cookies，將會依舊享受同源策略，因此不能被通過document.cookie或者從頭部相應(yīng)請求的腳本等訪問。

三點(diǎn)信息：
1.跨域訪問中，只有帶上withCredentials=true才會允許跨域的請求中帶上自己cookie，（authorization）而cookie中是存有sessionId的，所以也是保持會話一致的前提。
2.同域名下的這個參數(shù)是無效的。
3.通過這種方法攜帶的cookie依然受同源策略的限制，我們不能直接通過前端手段或者腳本訪問到改cookie。

所以我在react前端把所有的fetch的options中加上

credentials: 'include',

即可。此時發(fā)現(xiàn)每次fetch請求的session是同一個了。

轉(zhuǎn)載于:https://www.cnblogs.com/zhangmingzhao/p/9448265.html

總結(jié)

以上是生活随笔為你收集整理的跨域问题(续)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。